/**************************************
 *
 * VLOOK CSS 基础库
 *
 * V22.0
 * 2024-01-20
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

预加载提示 / body.typora-export #write::before / z-index: 7000;

欢迎页 / .v-welcome-page / z-index: 6000;

底部信息栏 / .v-bottom-tips / z-index: 5001;
聚光灯 / .v-spotlight / z-index: 5000;

---------- 高优先信息 UI 区 -----

无效链接清单 / .v-link-error-list / z-index: 4500;
工具栏提示、弹窗提示、字体风格切换 / .v-tool-tips, .v-info-tips, .v-font-theme / z-index: 3000;

---------- 二级 UI 区 ----------

插图导航 / .v-fig-nav / z-index: 2200;
脚注面板 / .v-footnote-pn / z-index: 2100;
导航中心收起/展开引导把手 / .v-toc-handle / z-index: 2000;
导航中心面板 / .v-nav-center / z-index: 2000;
    导航中心头部 / .v-nav-center-header / z-index: 10;
    导航中心脚部 / .v-nav-center-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .v-mask / z-index: 1000;
画中画 / .v-pic-in-pic / z-index: 500;

---------- 增强工具操作区 ----------

Mermaid工具提示 / div.mermaidTooltip / z-index: 100;
工具栏 / .v-toolbar / z-index: 100;
状态栏 / .v-status-bar / z-index: 100;
逐章导航面板 / .v-chapter-nav / z-index: 100;
文档更多内容遮挡阴影 / .v-more-doc-content-before, .v-more-doc-content-after / z-index: 99;

---------- 文档内容交互区 ----------

在新标签中打开按钮 / .v-btn-open-in-new-tab / z-index: 50;
内容辅助操作栏 / .v-content-assist-bar / z-index: 50;
内容展开操作区 / .v-content-expander / .v-cap-cntr.expander::before / z-index: 10;

---------- 导航中心 ----------

导航中心内文档抽屉入口 .v-doc-lib-board / z-index: 20;
导航中心内的分段控制按钮 .v-segment-indicator / z-index: 10
导航中心内的当前分段选择指示器 .v-segment-indicator / z-index: 0

**************************************/

//-----
// #Color_Scheme
// Light Mode 时图片的非网格背景
// @figureSolidBgLight: #FFFFFF;
// Dark Mode 时图片的非网格背景
// @figureSolidBgDark: #000000;
:root {
    --fig-solid-bg-lg: #FFFFFF; // Light Mode 时图片的非网格背景
    --fig-solid-bg-dk: #000000; // Dark Mode 时图片的非网格背景
    --fig-solid-bg: var(--fig-solid-bg-lg);
}
// // -----
// // #Common_LESS_Var
// @tableRowNumTop: 9px; // 表格行自动编号的高度
// @tableRowCursor: "▶️"; // 表格当前行鼠标 hover 游标
// // @tableCellPadding: 8px; // 表格单元格边距
// @focusCursor: "✏️"; // 编辑焦点行游标
// @focusStyle: @aBorderWidth dashed @aLineColor; // 焦点、焦点行样式
// @miniLineHeight: 1;
// @defaultLineHeight: 1.5;
// @paragraphPadding: .625em; // 段落空白
// @paragraphInnerLineHeight: 1.5;
// @figurePadding: 20px; // 插图内、间、行空白
// @hoverBrightness: 120%;
// @scrollFix: 8px; // 针对 Mermaid 图表，不添加会导致出现滚动条
// @syntaxTipsFont: italic normal 10px/1 var(--v-f-fm-bd); // 语法提示字体设置

// // 目录、文件 的当前节点、点击节点样式
// @tocItemActive_boxShadow: 0 0 0 2px fade(@headerColor, 50%);
// @tocItemCurrent_boxShadow: 0 0 0 2px fade(@headerColor, 50%) inset;

// -----
// #Common_CSS_Var
:root {
    // 欢迎页加载模式 ws=auto 时的倒计时秒数
    --v-ws-delay: @welcomeAutoCloseDelay;
    --v-summary-w: 24px;
    // --v-ex-all: "展开全部 ▼";
    --v-ex-limit: 300px;

    // #VLOOK_Var
    --v-theme-name: @themeName; // 主题名称
    --v-theme-version: "V22.0"; // 主题版本，对应适配 VLOOK.JS 的版本
    --v-color-scheme: light; // 默认颜色模式为：Light 明亮

    // 导航中心、工具栏相关 UI 尺寸
    --v-nav-center-w:340px;
    --v-nav-center-hidden-l:-350px;
    --v-tb-btn-w:44px;
    --v-tb-btn-s:5px;
    --v-top-margin:8px;
    --v-seg-h:26px;

    // 过渡效果设置
    --v-trans-dur: 200ms;
    --v-trans-value: all var(--v-trans-dur) ease-out;

    --tbl-cell-padding: 8px;

    --h6-prefix: @h6BeforeContent;

    // --------------------
    // 用于 plugin*.txt 中
    --v-btn-bg: @buttonBgColor;
    --v-btn-f: @buttonForeColor;

    // 主题配套的是否启用章节分级自动编号
    --v-chp-auto-num: @ChpAutoNum;

    // // 图片的线状网格背景（Light / Dark）
    // --v-fig-grid-l-lg: url("");
    // --v-fig-grid-l-dk: url("");
    // --v-fig-grid-l: var(--v-fig-grid-l-lg);
    // // 图片的块状网格背景（Light / Dark）
    // --v-fig-grid-b-lg: url("");
    // --v-fig-grid-b-dk: url("");
    // --v-fig-grid-b: var(--v-fig-grid-b-lg);
    // // Dark Mode 时反色的图片网格背景
    // --v-fig-grid-l-invert-lg: var(--v-fig-grid-l-lg);
    // --v-fig-grid-l-invert-dk: url("");
    // --v-fig-grid-b-invert-lg: var(--v-fig-grid-b-lg);
    // --v-fig-grid-b-invert-dk: url("");
    // --v-fig-grid-l-invert: var(--v-fig-grid-l-invert-dk);
    // --v-fig-grid-b-invert: var(--v-fig-grid-b-invert-dk);

    // 光标：复制
    --cur-copy: var(--cur-copy-normal);
    --cur-copy-normal: url(""), auto !important;
    --cur-copy-as-md: url(""), auto !important;

    --v-float-shadow: 0 4px 16px rgba(0, 0, 0, .3); // 按钮类外阴影
    --v-float-inn-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; // 按钮类内阴影（边框）

    --v-input-focus-shadow: 0 0 0 3px fade(@aColor, 35%); // 输入/编辑时阴影样式
    --v-input-focus-inn-shadow: 0 0 0 1px @aColor inset; // 输入/编辑时阴影样式
    --v-input-focus-border: @aColor;
}

@import "typora";
@import "mermaid";

html {
    font-size: @fontSize;
}

// VLOOK 未加载完成前的样式
body.typora-export #write::before {
    content: "Preparing VLOOK™ plugin ...\a\a正在准备 VLOOK™ 插件 ...";
    white-space: pre-wrap;
    line-height: 2 !important;
    padding-top: 4em;
    color: fade(@buttonForeColor, 50%);
    background: @buttonBgColor;
    font: italic var(--v-f-w-bd) 2em/10 var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 7000;

    // 插件加载成功后，会清空该动画属性，相关样式 .v-load-done::before
    // 在 60s 后该动画属性未被清空，则可能插件加载失败，或是没有使用正确的配置导出 HTML
    animation: maybe-failed 500ms ease 60s 1 forwards;
}

@keyframes maybe-failed {
    0% {
    }
    100% {
        content: "Oops~!\a\aThe VLOOK™ plugin load failed, it may be due to network reasons, or the page was not exported in the correct way.\a
        Please try refreshing the page later, or contact the publisher of the page.\a\a
        VLOOK™ 插件加载失败，可能是网络原因，或没有使用正确的方式导出页面。\a
        请稍后再刷新页面，或联系页面的发布者。\a\a
        https://madmaxchow.github.io/VLOOK/index.html";
        font-size: 1.5em;
        color: @buttonForeHoverColor;
        background: @aLineColor;
    }
}

// VLOOK 已完成加载的样式
.v-load-done {
    display: block !important;
}
.v-load-done::before {
    display: none !important;
    font-style: normal;
    animation: none;
}

body {
    background: var(--d-bc) var(--d-bi);
    color: var(--d-fc);
    font: var(--v-f-w-text) @fontSize/@paragraphInnerLineHeight var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    caret-color: @aHoverColor;
    -webkit-tap-highlight-color: transparent;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}

// 解结，可滚动
body.freeze {
    overflow: hidden;
}
// 冻结，不可滚动
body.unfreeze {
    overflow: auto;
}

// 插图
// #write p>img:only-child,
// #write p>.md-image:only-child:not(.md-img-error) img:not([src*="#line"]), // 是指 p 内只有 img 的才被视为插图
// #write p>.md-image:only-child:not(.md-img-error) img:not([src*="#block"]), // 是指 p 内只有 img 的才被视为插图
#write p>img,
#write p>.md-image:not(.md-img-error) img:not([src*="#line"]), // 是指 p 内只有 img 的才被视为插图
#write p>.md-image:not(.md-img-error) img:not([src*="#block"]), // 是指 p 内只有 img 的才被视为插图
.v-fig:not([aria-roledescription="zenuml"]),
.md-diagram-panel>.md-diagram-panel-preview>svg, // 编辑时
.md-diagram-panel>svg {
    border-radius: var(--v-r-b);
    padding: 0;
    border: @imgBorderWidth solid var(--pn-c);
    // background-color: @figureSolidBgLight;
    background-color: var(--fig-solid-bg);
}

// #write p>.md-image:only-child,
#write .md-image {
    font-size: @fontSizePx;
}

// 图片 URL 参数指定是否填充边缘
#write .md-image[data-src*="#padding"]>img, // 编辑时
#write img[src*="#padding"],
#write svg[data-inject-url*="#padding"] {
    padding: @figurePadding !important;
}
// 显式指定，一般图片被其他格式嵌套时，如链接内图片等
#write .md-image[data-src*="#inline"]>img, // 编辑时
#write img[src*="#inline"],
#write svg[data-inject-url*="#inline"] {
    margin-right: @figurePadding !important;
    margin-bottom: @figurePadding !important;
}
// 非显式指定时（即普通的连续图片、插图）
#write p :is(.md-image+.md-image, img+img, svg+svg, .v-caption+.v-caption) {
    margin-left: @figurePadding !important;
    margin-bottom: @figurePadding !important;
}

// 图片 URL 参数指定是否使用网格背景
#write .md-image[data-src*="#line"]>img, // 编辑时
#write img[src*="#line"],
#write svg[data-inject-url*="#line"] {
    background: var(--v-fig-grid-l);
    // background: var(--v-fig-grid-l-lg);
}
#write .md-image[data-src*="#block"]>img, // 编辑时
#write img[src*="#block"],
#write svg[data-inject-url*="#block"] {
    background: var(--v-fig-grid-b);
    // background: var(--v-fig-grid-b-lg);
}

// 图片 URL 参数指定进行颜色替换
#write img[d-img-fill="text"],
#write img[d-img-fill="t1"],
#write img[d-img-fill="t2"] {
    left: -12345px;
    border-color: transparent;
    position: relative;
}

// 图片 URL 参数指定图片的显示版式为：icon
#write .md-image[data-src*="#icon"]>img, // 编辑时
#write img[src*="#icon"],
#write svg[data-inject-url*="#icon"] {
    display: inline !important;
    height: 1.25em;
    width: auto;
    margin-top: -.25em !important;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
}
#write svg[data-inject-url*="#icon"] {
    height: 1em;
}
// 图片 URL 参数指定图片的显示版式为：icon0
#write .md-image[data-src*="#icon0"]>img, // 编辑时
#write img[src*="#icon0"],
#write svg[data-inject-url*="#icon0"] {
    height: auto; // 原始图标大小
    margin-top: -.1em !important;
}
// 图片 URL 参数指定图片的显示版式为：icon2x
#write .md-image[data-src*="#icon2x"]>img, // 编辑时
#write img[src*="#icon2x"],
#write svg[data-inject-url*="#icon2x"] {
    height: 2em;
}

// 图片 URL 参数指定图片的显示版式为：logo
#write .md-image[data-src*="#logo"]>img, // 编辑时
#write img[src*="#logo"],
#write svg[data-inject-url*="#logo"] {
    display: inline !important;
    vertical-align: middle;
    background: none !important;
    // margin-bottom: @figurePadding !important;
    border: none !important;
    border-radius: 0 !important;
}
// 左对齐
#write .md-image[data-src*="#logol"],//>img, // 编辑时
#write img[src*="#logol"],
#write svg[data-inject-url*="#logol"] {
    float: left !important;
    padding: 0 @figurePadding 0 0;
}
// 右对齐
#write .md-image[data-src*="#logor"],//>img, // 编辑时
#write img[src*="#logor"],
#write svg[data-inject-url*="#logor"] {
    float: right !important;
    padding: 0 0 0 @figurePadding;
}

// 图片 URL 参数指定图片的显示版式为：card
#write .md-image[data-src*="#card"]>img, // 编辑时
#write img[src*="#card"],
#write svg[data-inject-url*="#card"] {
    display: inline !important;
    vertical-align: middle;
    // border-bottom-color: @buttonBgColor !important;
    // border-bottom-width: 4px !important;
    border: none;
    border-bottom: .25em solid @buttonBgColor !important;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0 !important;
    background: none !important;
}
#write .md-image[data-src*="#cardd"]>img, // 编辑时
#write img[src*="#cardd"],
#write svg[data-inject-url*="#cardd"] {
    border: none !important;
}
// 图片 URL 参数指定是否显示边框，与 #card #cardd 配套使用
#write .md-image[data-src*="#card"][data-src*="#border"]>img, // 编辑时
#write img[src*="#card"][src*="#border"],
#write svg[data-inject-url*="#card"][data-inject-url*="#border"] {
    padding: 2px !important;
}
#write blockquote img[src*="#card"],
#write blockquote svg[data-inject-url*="#card"] {
    width: 100%;
}
// 针对 cardd Card Dual 模式微调
#write blockquote img[src*="#cardd"]+.v-post-card,
#write blockquote svg[data-inject-url*="#cardd"]+.v-post-card {
    display: block !important;
    position: initial !important;
    box-shadow: none !important;
    border-radius:  0 0 var(--v-r-b) var(--v-r-b) !important;
}

// 图片 URL 参数指定图片的显示版式为：frame
#write .md-image[data-src*="#frame"]>img, // 编辑时
#write img[src*="#frame"],
#write svg[data-inject-url*="#frame"] {
    display: inline !important;
    vertical-align: middle;
    background: none !important;
    margin-bottom: @figurePadding !important;
    border: @imgBorderWidth solid var(--pn-c) !important;
    border-radius: var(--v-r-b) !important;
}
// 左对齐
#write .md-image[data-src*="#framel"]>img, // 编辑时
#write img[src*="#framel"],
#write svg[data-inject-url*="#framel"] {
    float: left !important;
    padding: 0 @figurePadding 0 0;
}
// 右对齐
#write .md-image[data-src*="#framer"]>img, // 编辑时
#write img[src*="#framer"],
#write svg[data-inject-url*="#framer"] {
    float: right !important;
    padding: 0 0 0 @figurePadding;
}

// 生成通过图片 URL 参数指定图片的按宽度缩放样式
.genImgZoomW(@zoom) {
    #write .md-image[data-src*="#@{zoom}w"]>img, // 编辑时
    #write img[src*="#@{zoom}w"],
    #write svg[data-inject-url*="#@{zoom}w"] {
        width: ~"@{zoom}px";
    }
}
.genImgZoomW(200);
.genImgZoomW(400);
.genImgZoomW(600);
.genImgZoomW(800);

// 生成通过图片 URL 参数指定图片的按高度缩放样式
.genImgZoomH(@zoom) {
    #write .md-image[data-src*="#@{zoom}h"]>img, // 编辑时
    #write img[src*="#@{zoom}h"],
    #write svg[data-inject-url*="#@{zoom}h"] {
        vertical-align: top;
        height: ~"@{zoom}px";
    }
}
.genImgZoomH(200);
.genImgZoomH(400);
.genImgZoomH(600);
.genImgZoomH(800);

// 图片默认对齐方式，或 URL 参数指定左对齐
// 须放在各种版式的样式之后，避免 display 属性冲突
// 导出为 HTML 后的插图（不包括版式为 logo / frame 等），由 vlook.js 进行二次调整，详见 __initAlign
#write p>img:only-child,
#write p>.md-image:only-child:not(.md-img-error)>img, // 是指 p 内只有 img 的才被视为插图
#write p>.md-image:only-child[data-src*="#left"]:not(.md-img-error)>img, // 编辑时
#write p>img:only-child[src*="#left"],
#write p>svg[data-inject-url*="#left"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#left"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#left"] {
    display: inline-block !important;
    margin: 0 !important;
}
// 图片 URL 参数指定居中对齐
#write p>.md-image:only-child[data-src*="#center"]:not(.md-img-error)>img, // 编辑时
#write p>img[src*="#center"],
#write p>svg[data-inject-url*="#center"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#center"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#center"] {
    display: block !important;
    margin: auto !important;
}
// 图片 URL 参数指定右对齐
#write p>.md-image:only-child[data-src*="#right"]:not(.md-img-error)>img, // 编辑时
#write p>img[src*="#right"],
#write p>svg[data-inject-url*="#right"],
#write p>.md-image:only-child:not(.md-img-error)>img[src*="#right"],
#write p>.md-image:only-child:not(.md-img-error)>svg[data-inject-url*="#right"] {
    display: block !important;
    margin: auto !important;
    margin-right: 0 !important;
}

#write audio {
    margin: 0 10px 0 10px;
    border-radius: var(--v-r-s);
}

#write sup.md-footnote {
    // color: var(--d-fc);
    // opacity: .5;
    background: none;
    padding: 0;
    margin-left: .2em;
    margin-right: .2em;
}

// #write sup.md-footnote span[md-inline="plain"] {
//     color: var(--d-bc);
//     background: var(--d-fc);
//     border-radius: var(--v-r-b);
//     font: var(--v-f-w-bd) 10px var(--v-f-fm-bd);
//     padding: 0 5px;
// }

#write sup.md-footnote span[md-inline="plain"], // 编辑时
#write :is(sup.md-footnote, .v-q sup.md-footnote)>a {
    color: var(--d-bc) !important;
    background: var(--d-fc) !important;
    border-radius: var(--v-r-b);
    font: var(--v-f-w-bd) 10px var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    padding: 0 5px;
    margin: 0;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    border-bottom: none;
}

#write sup.md-footnote>a:hover {
    background: var(--d-fc-a)!important;
    box-shadow: none !important;
    // box-shadow: 0 0 0 1px var(--d-fc) !important;
    // background: @aLineColor;
    // color: @buttonForeColor !important;
}

.footnote-line>a:not(.reversefootnote) {
    color: var(--d-fc);
    text-decoration: none;
}

// 指定不使用链接样式
// #write a[href*="lnkcss=none"] {
//     border-bottom: none;
// }
// kbd 中的链接样式
// #write kbd a {
//     color: var(--d-bc) !important;
//     border-bottom: none;
// }

// 指定不使用链接样式
// #write a[href*="lnkcss=none"]:active,
// // kbd 中的链接样式
// #write kbd a:active {
//     border: none;
// }

// 指定不使用链接样式
// #write a[href*="lnkcss=none"]:hover,
// kbd 中的链接样式
// #write kbd a:hover {
//     box-shadow: none;
//     border-bottom: none;
// }

// 链接中的 kbd 样式
#write a kbd {
    color: @docLibButtonForeColor;
    caret-color: @buttonForeColor;
    font: var(--v-f-w-bd) .875em/@paragraphInnerLineHeight var(--v-f-fm-key) !important; // [style] [weight] [size/[line-height]] [family]
    background: @docLibButtonBgColor;
    margin: 5px 0;
    border: none;
    border-radius: var(--v-r-b);
    display: inline-block;
    box-shadow: 0 3px darken(@docLibButtonBgColor, 15%); // 按钮高 3px
    text-shadow: none;
    padding: 3px 8px;
    // padding: 5px 10px;
}
#write :is(a, .v-q a, .v-q .v-q a) kbd:hover { // 针对彩虹引用块内的情况
    color: @buttonForeHoverColor;
    background: @aHoverColor;
    box-shadow: 0 3px darken(@aHoverColor, 15%); // 按钮高 3px
}
// 针对彩虹引用块内的情况
//#write .v-q a kbd {
//    color: --d-bc-lg !important;
//}
// 链接中的 kbd 样式
#write a kbd:active {
    background: @aActiveColor !important;
    margin-top: 8px; // 5px + 按钮高 3px
    margin-bottom: 2px; // 5px - 按钮高 3px
    box-shadow: none !important;
    transition: none !important;
}

// #write blockquote a kbd,
// #write details a kbd {
#write @{quote_details} a kbd {
    border-radius: var(--v-r-s);
    padding: 2px 8px;
}

// 引用块小标题
@quoteTitle: ~'blockquote>p:first-child>:is(strong, span[md-inline="strong"]):only-child';
#write @{quoteTitle} {
    display: block;
    font-size: 1.25em;
    text-align: @headerTextAlign;
    border-bottom: @quoteTitleBorderWidth solid var(--ac-bk-fade);//var(--ac-t1-fade);
    padding: 0 0 .3125em 0;
    margin-bottom: .3125em;
}
// 编辑时
content>#write @{quoteTitle} {
    color: @h6Color;//var(--ac-t1);
}

// 标题内链接样式
#write :is(h1,h2,h3,h4,h5,h6) a {
    font-weight: inherit;
}

// 文本链接
#write a,
body.typora-export a,
.code-tooltip a {
// :is(#write, body.typora-export, .code-tooltip) a {
    color: var(--a-color) !important;
    text-decoration: none;
}
#write a:hover,
body.typora-export a:hover,
.code-tooltip a:hover {
// :is(#write, body.typora-export, .code-tooltip) a:hover {
    color: @aHoverColor !important;
    box-shadow: 0 -.3em 0 0 fade(@aLineColor, 30%) inset;
}

// 图片 URL 参数指定在 Dark Mode 时反色
#write img[src*="darksrc=invert"],
#write svg[data-inject-url*="darksrc=invert"] {
    filter: var(--v-invert-dark);
    border-color: var(--img-bd-invert) !important;
    // 使用反色后的背景，以适应在反色中显示为正常效果
    // background-color: @figureSolidBgLight;
    background-color: var(--fig-solid-bg);
}

#write .md-image[data-inject-url*="darksrc=invert"].md-image[data-src*="#line"]>img, // 编辑时
#write img[src*="darksrc=invert"][src*="#line"],
#write svg[data-inject-url*="darksrc=invert"][data-inject-url*="#line"] {
    background: var(--v-fig-grid-l-invert);
}

#write .md-image[data-inject-url*="darksrc=invert"].md-image[data-src*="#block"]>img, // 编辑时
#write img[src*="darksrc=invert"][src*="#block"],
#write svg[data-inject-url*="darksrc=invert"],[data-inject-url*="#block"] {
    background: var(--v-fig-grid-b-invert);
}

// 链接 hover 时，链接内图片样式
#write a:hover :is(img, svg) {
    filter: brightness(@hoverBrightness);
}
#write a:hover :is(
img[src*="darksrc=invert"],
svg[data-inject-url*="darksrc=invert"]) {
    filter: var(--v-invert-dark) brightness(@hoverBrightness);
}

// 链接 hover 时含图片颜色替换的样式
#write a:hover :is(
img[d-img-fill="text"],
img[d-img-fill="t1"],
img[d-img-fill="t2"]) {
    left: -12345px;
    filter: drop-shadow(12345px 0px @aHoverColor) !important;
    position: relative;
}
// 链接 hover 时其内嵌按钮的内嵌 img 图片
#write a:hover kbd :is(
img[d-img-fill="text"],
kbd img[d-img-fill="t1"],
kbd img[d-img-fill="t2"]) {
    filter: drop-shadow(12345px 0px @buttonForeHoverColor) !important;
}
// 链接 hover 时其内嵌按钮的内嵌 svg 图片颜色替换的样式
#write a:hover kbd svg[d-img-fill] :is(path, rect, ellipse, polygon) {
    fill: @buttonForeHoverColor !important;
}
// 针对彩虹引用块内的情况
//#write .v-q a:hover kbd svg[d-img-fill] :is(path, rect, ellipse, polygon) {
//    fill: --d-bc-lg !important;
//}
// 链接 active 时，链接内图片样式
#write a:active img {
    filter: brightness(.8);
}

:is(#write, body.typora-export) a:active {
    color: var(--d-fc) !important;
    background: var(--pn-c);
    border-bottom: 0;
    border-radius: var(--v-r-s);
    transition: none;
}

// 默认的超链接样式
#write a:not([name^="ref-footnote"]):hover::before {
    content: "…"; // 非页内链接的符号
    text-transform: uppercase;
    white-space: pre;
    margin-top: -1em;
    color: #FFFFFF;
    background: @accColorBrown;
    text-shadow: none;
    border-radius: var(--v-r-tag);
    padding: 2px 3px;
    font: var(--v-f-w-title) 12px/@miniLineHeight var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    position: absolute;
    display: inline-block;
    z-index: 99999;
    letter-spacing: 0;
}
// 含有 img 的情况微调
#write a:not([name^="ref-footnote"]):has(img):hover::before {
    margin-top: -1.5em;
}

// 页内链接
#write :is(a[class*="md-toc-inner"], a[href^="#"]):hover::before {
    content: "#";
    background: @accColorGray;
}
#write a[href="#"]:hover::before { // 针对 table.md-grid-board 中的 td>a 标签
    display: none;
}
// md 文档
#write a[href*=".md"]:hover::before {
    content: "🅼 Markdown file";
    color: var(--d-bc);
    background: var(--d-fc);
}
// VLOOK 文库专用链接
#write a[href*="target=vdl"]:hover::before,
#write a[target="vdl"]:hover::before {
    content: "VLOOK™ Document Library / 文库";
    color: @buttonForeColor;
    background: @buttonBgColor;
}
// HTTPS 协议
#write a[href^="http://"]:hover::before {
    content: "HTTP / 链接";
    background: @aLineColor;
}
#write a[href^="https://"]:hover::before {
    content: "Secure Link / 安全链接";
    background: @accColorGreen;
}
// MAILTO 协议
#write a[href^="mailto:"]:hover::before {
    content: "Email / 邮件";
    background: @accColorBlue;
}
// 文档资源
#write :is(a[href$=".pdf"], a[href$=".PDF"],
a[href$=".doc"], a[href$=".DOC"],
a[href$=".docx"], a[href$=".DOCX"],
a[href$=".xls"], a[href$=".XLS"],
a[href$=".xlsx"], a[href$=".XLSX"],
a[href$=".ppt"], a[href$=".PPT"],
a[href$=".pptx"], a[href$=".PPTX"],
a[href$=".txt"], a[href$=".TXT"],
a[href$=".csv"],
a[href$=".CSV"]):hover::before {
    content: "Document File / 文档";
    background: @accColorCyan;
}
// 归档资源
#write :is(a[href$=".zip"],
a[href$=".rar"],
a[href$=".7z"],
a[href$=".gz"],
a[href$=".tar"],
a[href$=".dmg"],
a[href$=".cab"]):hover::before {
    content: "Archive File / 压缩文件";
    background: @accColorOrange;
}
// 可执行文件
#write :is(a[href$=".exe"], a[href$=".sh"]):hover::before {
    content: "!! High Risk !! 高风险 !!";
    background: @accColorRed;
}

// 标题
#write :is(h1,h2,h3,h4,h5,h6) {
    color: var(--h-f);
    text-align: @headerTextAlign;
    position: relative;
    margin: @h6Margin;
    padding: @headerPadding;
    line-height: @defaultLineHeight;
    font: var(--v-f-w-title) 1em var(--v-f-fm-h); // [style] [weight] [size/[line-height]] [family]
    border-radius: @headerBorderRadius;
    background: @headerBackground;
    letter-spacing: @headerLetterSpacing;
}

// 标题内文本渐变色
#write :is(h1,h2,h3,h4,h5)>span {
    background: @lgHeaderBg;
    background-clip: @lgHeaderBgClip;
    -webkit-background-clip: @lgHeaderBgClip;
    color: @lgHeaderColor;
}

// 渐变文本基础样式，另再额外补充 background 样式
.v-grad-base {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

#write h1 {
    color: @h1Color;
    padding: @h1Padding;
    margin: @h1Margin;
    font-size: @h1FontSize;
    box-shadow: @h1Shadow;
    -webkit-text-stroke: @h1TextStroke;
    text-stroke: @h1TextStroke;
    text-shadow: @h1TextShadow;
    border-radius: @h1BorderRadius;
    border-left: @h1BorderLeft;
    border-right: @h1BorderRight;
    border-top: @h1BorderTop;
    border-bottom: @h1BorderBottom;
}
// #write h1>span {
//     color: @lgH1Color;
//     // background: @h1SpanBackground;
//     padding: @h1SpanPadding;
//     border-radius: @h1SpanBorderRadius;
// }

#write h2 {
    color: @h2Color;
    padding: @h2Padding;
    margin: @h2Margin;
    font-size: @h2FontSize;
    box-shadow: @h2Shadow;
    -webkit-text-stroke: @h2TextStroke;
    text-stroke: @h2TextStroke;
    text-shadow: @h2TextShadow;
    border-radius: @h2BorderRadius;
    border-left: @h2BorderLeft;
    border-right: @h2BorderRight;
    border-top: @h2BorderTop;
    border-bottom: @h2BorderBottom;
}
// #write h2>span {
//     color: @lgH2Color;
//     // background: @h2SpanBackground;
//     padding: @h2SpanPadding;
//     border-radius: @h2SpanBorderRadius;
// }

// h1 后紧跟 h2，或是只有普通正文段落的情况
#write h1+h2 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h3 {
    color: @h3Color;
    padding: @h3Padding;
    margin: @h3Margin;
    font-size: @h3FontSize;
    box-shadow: @h3Shadow;
    -webkit-text-stroke: @h3TextStroke;
    text-stroke: @h3TextStroke;
    text-shadow: @h3TextShadow;
    border-radius: @h3BorderRadius;
    border-left: @h3BorderLeft;
    border-right: @h3BorderRight;
    border-top: @h3BorderTop;
    border-bottom: @h3BorderBottom;
}
// #write h3>span {
//     color: @lgH3Color;
//     // background: @h3SpanBackground;
//     padding: @h3SpanPadding;
//     border-radius: @h3SpanBorderRadius;
// }

// h2 后紧跟 h3，或是只有普通正文段落的情况
// h2+p+h3,
#write h2+h3 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h4 {
    color: @h4Color;
    padding: @h4Padding;
    margin: @h4Margin;
    font-size: @h4FontSize;
    box-shadow: @h4Shadow;
    -webkit-text-stroke: @h4TextStroke;
    text-stroke: @h4TextStroke;
    text-shadow: @h4TextShadow;
    border-radius: @h4BorderRadius;
    border-left: @h4BorderLeft;
    border-right: @h4BorderRight;
    border-top: @h4BorderTop;
    border-bottom: @h4BorderBottom;
}
// #write h4>span {
//     color: @lgH4Color;
//     // background: @h4SpanBackground;
//     padding: @h4SpanPadding;
//     border-radius: @h4SpanBorderRadius;
// }

// h3 后紧跟 h4，或是只有普通正文段落的情况
// h3+p+h4,
#write h3+h4 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h5 {
    color: @h5Color;
    padding: @h5Padding;
    margin: @h5Margin;
    font-size: @h5FontSize;
    box-shadow: @h5Shadow;
    -webkit-text-stroke: @h5TextStroke;
    text-stroke: @h5TextStroke;
    text-shadow: @h5TextShadow;
    border-radius: @h5BorderRadius;
    border-left: @h5BorderLeft;
    border-right: @h5BorderRight;
    border-top: @h5BorderTop;
    border-bottom: @h5BorderBottom;
}
// #write h5>span {
//     color: @lgH5Color;
//     // background: @h5SpanBackground;
//     padding: @h5SpanPadding;
//     border-radius: @h5SpanBorderRadius;
// }

// h4 后紧跟 h5，或是只有普通正文段落的情况
// h4+p+h5,
#write h4+h5 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: @hContinuous;
    border-top: 0;
}

#write h6 {
    color: @h6Color;
    text-align: left;
    margin-bottom: 0;
    padding-left: 0;
    font: var(--v-f-w-bd) @h6FontSize var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    box-shadow: @h6Shadow;
    -webkit-text-stroke: @h6TextStroke;
    text-stroke: @h6TextStroke;
    text-shadow: @h6TextShadow;
    border-left: @h6BorderLeft;
    border-right: @h6BorderRight;
    border-top: @h6BorderTop;
    border-bottom: @h6BorderBottom;
    background: none;
}
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after,
@{backcover}::after,
#write @{quote_details} h6::after {
    margin-left: 0;
    padding-bottom: 0;
    border: none;
}

#write :is(
h1+h6,
h2+h6,
h3+h6,
h4+h6,
h5+h6,
h6+h6) {
    margin-top: 0;
    padding-top: 0;
}

#write li>h6 {
    // 用于：子表
    color: var(--h-f);
    border-left: 0;
    padding-left: 0;
}

:is(body.typora-export, #write) strong {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

:is(body.typora-export, #write) strong a {
    font-weight: var(--v-f-w-bd);
}

#write hr {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 2px solid var(--ac-bk-fade);//var(--pn-c);
    // border: @quoteTitleBorderWidth solid var(--ac-bk-fade);//var(--pn-c);
    // border: none;
    // background: linear-gradient(90deg, transparent, var(--ac-bk-fade) 15%, var(--ac-bk-fade), var(--ac-bk-fade) 85%, transparent);
    // height: @quoteTitleBorderWidth;
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}
// 引用块内嵌引用块内的 hr
// #write @{quote_details}>@{quote_details} hr {
//     border-width: 1px;
// }

body>div>h1:first-of-type {
    border-top: 0;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body>:is(
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child) {
    margin-top: 0;
    padding-top: 0;
}

#write a:first-child>:is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
    padding-top: 0;
}

// 明信片样式
#write .v-post-card {
    left: 0;
    color: @buttonForeColor;
    background: @buttonBgColor;
    position: absolute;
    display: none;
    overflow: hidden;
    padding: 10px 20px;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, .3);
}
#write .v-post-card>.v-card-title {
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    padding: 0 0 10px 0;
}
#write .v-post-card>.v-card-text p {
    margin-top: 0;
}

// 配合段落导航使用
#write :is(figure, .md-diagram-panel) {
    text-align: left;
    // margin-top: 0;
}

#write figure {
    padding-bottom: 1px;
    margin-top: 0;//@paragraphPadding;
    margin-bottom: @scrollFix; // 针对以下的 .md-diagram-panel 修正
    border-radius: @tableBorderRadius;
    // position: relative;
}
// 针对导出后微调
body.typora-export #write figure {
    position: relative;
    margin-top: @paragraphPadding !important;
}
.md-diagram-panel {
    padding-bottom: @scrollFix; // 针对 Mermaid 图表，不添加会导致出现滚动条
}

// 有序、无序列表符号样式
#write ::marker,
#write li::before {
    font-family: var(--v-f-fm-num);
    color: var(--h-f);
    margin-left: 5px;
}

#write :is(ul,ol) {
    padding-left: 1.25em;
    padding-bottom: 0;
    margin-top: .625em;
}
// 除图片插图外的段落样式
#write>p {
    margin-top: @paragraphPadding;
}
// 针对紧跟图片、表格后的引用块内的小标题样式微调
// #write p {
//     width: 100%;
// }


// ----------------------------------------
// 段落间距样式
#write p,
#write li {
    margin-top: @paragraphPadding;
    margin-bottom: 0;
    word-break: normal;
    word-wrap: break-word;
}
// content>#write p:has(.md-image) { // Typora 编辑时的图片段落
//     margin-top: 0;
// }

#write @{quote_details}>p:first-child,
#write @{quote_details}>ol:first-child,
#write @{quote_details}>ul:first-child,
#write @{quote_details}>ol:first-child>li:first-child,
#write @{quote_details}>ul:first-child>li:first-child,
#write @{quote_details}>ol:first-child>li:first-child>p,
#write @{quote_details}>ul:first-child>li:first-child>p {
    margin-top: 0 !important;
}

// 有序列表
#write ol>li { // 1 级
    list-style-type: decimal;
}
#write ol>li>ol>li { // 2 级
    list-style-type: lower-alpha;
}
#write ol>li>ol>li>ol>li { // 3 级
    list-style-type: lower-roman;
}
#write ol>li>ol>li>ol>li>ol>li { // 4 级
    list-style-type: decimal-leading-zero;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li { // 5 级
    list-style-type: upper-alpha;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li>ol>li { // 6 级
    list-style-type: upper-roman;
}

// 无序列表
#write ul>li { // 1 级
    list-style-type: disc;
}
#write ul>li>ul>li { // 2 级
    list-style-type: square;
}
#write ul>li>ul>li>ul>li { // 3 级
    list-style-type: circle;
}
#write ul>li>ul>li>ul>li>ul>li { // 4 级
    list-style-type: disc;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li { // 5 级
    list-style-type: square;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li>ul>li { // 6 级
    list-style-type: circle;
}

#write :is(ol>li>ol>li, ul>li>ul>li)::before {
    color: var(--ac-t2-lg) !important;
}

#write @{quote_details}[d-quote-group]+figcaption {
    margin-top: 1em;
}

@blockPaddingTop: 12px;
// #write @{quote_details},
#write>@{quote_details},
#write>@{quote_details} @{quote_details},
#write .md-alert @{quote_details},
body:not([class]) blockquote { // 用于在 Typora 中的进行主题预览
    color: var(--d-fc);
    // background: var(--ac-t1-fade);
    background: @quoteBgDefault;//var(--blockquote-bg);
    border-left: @quoteBorderLeft;
    border-radius: @quoteRadius;//var(--v-r-b);
    padding: @blockPaddingTop 1em;
    margin-top: @paragraphPadding;
    margin-bottom: 0;
}
// #write>@{quote_details} {
//     margin-top: @paragraphPadding;
// }

// 详情展开后的标题
details[open]>summary {
    border-bottom: @quoteTitleBorderWidth solid var(--ac-bk-fade);//var(--ac-t1-fade);//var(--d-bc);
    padding-bottom: .3125em;
    margin-bottom: .3125em;
}

summary {
    font: var(--v-f-w-title) 1.125em var(--v-f-fm-title);
    cursor: pointer;
}
details[open]>summary:hover,
summary:hover {
    color: var(--d-fc) !important;
}
// details[open]>summary:hover::before,
// summary:hover::before {
//     color: var(--d-bc) !important;
//     background-color: var(--d-fc) !important;
// }

// 隐藏 details 默认的三角符号
summary::marker {
    display: none;
    font-size: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary::-moz-list-bullet {
    font-size: 0;
}
// 编辑时的 summary 折叠样式
// @detailTitle: ~"content>#write blockquote>h6:first-child";
// content>#write blockquote>h6:first-child::before,
// // 导出 HTML 后的 summary 折叠样式
// summary::before {
//     content: "+" !important;
//     color: @docLibButtonForeColor;
//     background-color: @docLibButtonBgColor;
//     position: relative;
//     display: inline-block;
//     text-align: center;
//     border-radius: 50%;
//     width: 1em;
//     height: 1em;
//     line-height: @summaryFoldHolderHeight;
//     font-size: 1.2em;
//     margin-right: 5px;
// }
content>#write @{summaryOnEditing} {
    color: var(--ac-t1);
}
content>#write @{summaryOnEditing}::before {
    content: "×" !important;
    color: var(--d-fc);
    background-color: var(--d-fc-a);
    position: relative;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: @summaryFoldHolderHeight;
    font-size: 1.2em;
    margin-right: 5px;
}
content>#write @{summaryOnEditing}::after {
    content: "Folded Below / 以下会被折叠";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    position: absolute;
    display: block;
    margin: 9px 0 0 0;
    color: var(--d-fc);
    opacity: .5;
}
summary::before {
    content: "";
    position: relative;
    display: inline-block;
    width: var(--v-summary-w);
}
// // 编辑时折叠样式
// content>#write blockquote>h6:first-child::before,
// // 生成 HTML 并转换为 detail 后样式
// details[open]>summary::before {
//     content: "×" !important;
//     color: var(--d-fc);
//     background-color: var(--d-fc-a);
// }

// // 紧跟图片、表格后的引用块样式微调
// #write :is(figure, .md-fences)+@{quote_details},
// // 紧跟带自动题注的内容（插图、代码块、表格、音频、视频）后的引用块样式微调
// #write :is(.v-cap-cntr, .v-cap-cntr+.v-content-expander)+@{quote_details} {
//     width: fit-content;
//     max-width: 100%;
//     background: var(--pn-c) !important;
//     border-left: @quoteBorderWidth solid var(--pn-c-a);//fade(@accColorGray, 20%);
//     // border-top-left-radius: 0;
//     border-radius: 0 var(--v-r-b) var(--v-r-b);
//     padding: .75em 1em;
//     margin-top: 0;
// }
// #write @{quote_details}>:is(figure, .md-fences)+@{quote_details},
// #write @{quote_details}>:is(.v-cap-cntr, .v-cap-cntr+.v-content-expander)+@{quote_details} {
//     background: var(--d-bc) !important;
// }

// --------------------
// 引用块分栏

// 引用块分栏提示样式
content>#write .md-hr+blockquote::before {
    // background-color: var(--d-bc); //var(--pn-c-a);
    // background: linear-gradient(90deg,var(--d-bc) 5%,transparent 10%,var(--d-bc) 15%,var(--d-bc) 85%,transparent 90%,var(--d-bc) 95%, var(--d-bc));
    background: linear-gradient(90deg, transparent, transparent 5%, var(--d-bc) 15%, var(--d-bc) 85%, transparent 95%, transparent);
    color: var(--d-fc-a); //var(--d-fc);
    font: @syntaxTipsFont;
    text-transform: uppercase;
    text-align: center;
    white-space: pre;
    padding: 0 .75em;
    margin-left: -1.3em;
    position: absolute;
    width: auto;
    left: 33px; //3em;
    right: 20px;
    opacity: 1; //.5;
    pointer-events: none;
}
content>#write .md-hr+blockquote::before {
    content: "⬛︎ ⬛︎  2 Columns of Quote / 双栏引用块  ⬛︎ ⬛︎";
    margin-top: -5em; //-3.8em;
    line-height: 2em;
}
// 针对明信片 card cardd 的微调
content>#write .md-hr+blockquote:has(.md-image[data-src*="#card"])::before {
    margin-top: -3.6em;
}
content>#write .md-hr+.md-hr+blockquote::before {
    content: "⬛︎ ⬛︎ ⬛︎  3 Columns of Quote / 三栏引用块  ⬛︎ ⬛︎ ⬛︎";
    margin-top: -5.2em; //-5.8em;
    line-height: 2em;
}
// 针对明信片 card cardd 的微调
content>#write .md-hr+.md-hr+blockquote:has(.md-image[data-src*="#card"])::before {
    margin-top: -4em;
}
content>#write .md-hr+.md-hr+.md-hr+blockquote::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of Quote / 四栏引用块  ⬛︎ ⬛︎ ⬛︎ ⬛︎";
    margin-top: -6em; //-7.6em;
    line-height: 3em;
}
// 针对明信片 card cardd 的微调
content>#write .md-hr+.md-hr+.md-hr+blockquote:has(.md-image[data-src*="#card"])::before {
    margin-top: -4.8em;
}
// -----
@quote_details: ~":is(blockquote, details)";
@hr_MdHr: ~":is(hr, .md-hr)";
@n2Hr_MdHr: ~":is(hr+hr, .md-hr+.md-hr)";
@n3Hr_MdHr: ~":is(hr+hr+hr, .md-hr+.md-hr+.md-hr)";
@n4Hr_MdHr: ~":is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)";
// 以双栏方式显示，49*2+2*1=100
#write @{hr_MdHr}+@{quote_details},
#write @{hr_MdHr}+@{quote_details}+@{quote_details} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 49% !important;
    min-width: 49% !important;
    vertical-align: top;
}
// 双栏内容之间的样式
#write @{hr_MdHr}+@{quote_details}+@{quote_details} {
    margin-left: 2% !important;
}

// -----
// 以三栏方式显示，32*3+2*2=100
#write @{n2Hr_MdHr}+@{quote_details},
#write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
#write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 32% !important;
    min-width: 32% !important;
    vertical-align: top;
}
// 三栏内容之间的样式
#write @{n2Hr_MdHr}+@{quote_details}+@{quote_details},
#write @{n2Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details} {
    margin-left: 2% !important;
}

// -----
// 以四栏方式显示，23.5*4+2*3=100
#write @{n3Hr_MdHr}+@{quote_details},
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
    vertical-align: top;
}
// 四栏内容之间的样式
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details},
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
#write @{n3Hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
    margin-left: 2% !important;
}

// 引用块内的双栏、三栏、四栏
#write @{quote_details}>@{hr_MdHr}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
    border: none;
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s);
    padding: .75em 1em;
    margin-top: .625em;
    margin-bottom: .625em;
}


// #write blockquote hr,
// #write details hr {
//     // border-color: var(--ac-t1-fade);
//     border-width: @aBorderWidth;
// }

#write blockquote h6 {
    padding: 0;
    margin-top: 0;
    color: var(--d-fc);
    font-size: 1.125em;
}

#write blockquote h6 a {
    margin-left: -.1em;
}

#write blockquote h6::before {
    content: "" !important;
    margin-left: 0 !important;
}

#write @{quote_details} .CodeMirror-linenumber {
    color: var(--d-fc-a);//var(--h-f);
}

// 代码块内代码区域
#write pre.ty-contain-cm .CodeMirror-lines {
    background: var(--c-blk-bg);
    background-size: @codeBlockBackgroundSize;
    background-repeat: @codeBlockBackgroundRepeat;
    background-position: @codeBlockBackgroundPosition;
}

// --------------------
// 列表分栏

// 列表分栏内容微调
#write @{hr_MdHr}+ul,
#write @{hr_MdHr}+ol {
    padding-left: 0 !important;
}
#write @{hr_MdHr}+ul>li,
#write @{hr_MdHr}+ol>li {
    box-shadow: 0 0 0 2px var(--std-code-shadow) inset;
    border-radius: var(--v-r-b);
    margin-top: 0 !important;
    margin-bottom: 1em;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    list-style: none;
}
// hover
@listColumnHoverFill: var(--d-fc-a);
#write @{hr_MdHr}+ul>li:hover>p:first-of-type,
#write @{hr_MdHr}+ol>li:hover>p:first-of-type {
    background: @listColumnHoverFill !important;
}
#write @{hr_MdHr}+ul>li:hover,
#write @{hr_MdHr}+ol>li:hover {
    box-shadow: 0 0 0 2px @listColumnHoverFill inset;
}
#write @{hr_MdHr}+ul>li>p:first-of-type,
#write @{hr_MdHr}+ol>li>p:first-of-type {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd);
    color: var(--d-fc);
    background: var(--std-code-shadow);
    padding: 5px;
    border-radius: var(--v-r-t) var(--v-r-t) 0 0;
    text-align: center;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px;
    width: auto;
}
// 列表分栏提示样式
content>#write .md-hr+ul::before,
content>#write .md-hr+ol::before {
    // background-color: var(--pn-c-a);
    // background: linear-gradient(90deg,var(--d-bc) 5%,transparent 10%,var(--d-bc) 15%,var(--d-bc) 85%,transparent 90%,var(--d-bc) 95%, var(--d-bc));
    background: linear-gradient(90deg, transparent, transparent 5%, var(--d-bc) 15%, var(--d-bc) 85%, transparent 95%, transparent);
    color: var(--d-fc-a);
    font: @syntaxTipsFont;
    text-transform: uppercase;
    text-align: center;
    white-space: pre;
    padding: 0 10px;
    margin-left: 0;
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    opacity: 1;
    pointer-events: none;
}
content>#write .md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎  2 Columns of List / 双栏列表  ⬛︎ ⬛︎";
    margin-top: -2.8em; //-1.6em;
    line-height: 2em;
}
content>#write .md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎  3 Columns of List / 三栏列表  ⬛︎ ⬛︎ ⬛︎";
    margin-top: -3em;
    // padding-top: .5em;
    // padding-bottom: .5em;
    line-height: 2em;
}
content>#write .md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of List / 四栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ";
    margin-top: -3.4em; //-5.4em;
    // padding-top: 1.4em;
    // padding-bottom: 1.4em;
    line-height: 2.2em;
}
content>#write .md-hr+.md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎  5 Columns of List / 五栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎";
    margin-top: -4.1em; //-7.1em;
    // padding-top: 2.2em;
    // padding-bottom: 2.2em;
    line-height: 3em;
}

// -----
@n2Li: ~"li+li";
@n3Li: ~"li+li+li";
@n4Li: ~"li+li+li+li";
@n5Li: ~"li+li+li+li+li";
// 以双栏方式显示列表，49*2+0.5*2*2=100
#write @{hr_MdHr}+ul>li,
#write @{hr_MdHr}+ul>@{n2Li},
#write @{hr_MdHr}+ol>li,
#write @{hr_MdHr}+ol>@{n2Li} {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 49% !important;
    min-width: 49% !important;
}
// 双栏列表内容之间的样式
#write @{hr_MdHr}+ul>@{n2Li},
#write @{hr_MdHr}+ol>@{n2Li} {
    margin-left: 2% !important;
}
// 每两个分栏首个列表微调
#write @{hr_MdHr}+ul>li:nth-of-type(2n+1),
#write @{hr_MdHr}+ol>li:nth-of-type(2n+1) {
    margin-left: 0 !important;
}
// 双栏的有序列表微调
#write @{hr_MdHr}+ul ol>li,
#write @{hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以三栏方式显示列表，32*3+2*2=100
#write @{n2Hr_MdHr}+ul>li,
#write @{n2Hr_MdHr}+ul>@{n2Li},
#write @{n2Hr_MdHr}+ul>@{n3Li},
#write @{n2Hr_MdHr}+ol>li,
#write @{n2Hr_MdHr}+ol>@{n2Li},
#write @{n2Hr_MdHr}+ol>@{n3Li} {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 32% !important;
    min-width: 32% !important;
}
// 三栏列表内容之间的样式
#write @{n2Hr_MdHr}+ul>@{n2Li},
#write @{n2Hr_MdHr}+ul>@{n3Li},
#write @{n2Hr_MdHr}+ol>@{n2Li},
#write @{n2Hr_MdHr}+ol>@{n3Li} {
    margin-left: 2% !important;
}
// 每三个分栏首个列表微调
#write @{n2Hr_MdHr}+ul>@{n2Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ul>@{n3Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ol>@{n2Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ol>@{n3Li}:nth-of-type(3n+1) {
    margin-left: 0 !important;
}
// 三栏的有序列表微调
#write @{n2Hr_MdHr}+ul ol>li,
#write @{n2Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以四栏方式显示列表，23.5*4+2*3=100
#write @{n3Hr_MdHr}+ul>li,
#write @{n3Hr_MdHr}+ul>@{n2Li},
#write @{n3Hr_MdHr}+ul>@{n3Li},
#write @{n3Hr_MdHr}+ul>@{n4Li},
#write @{n3Hr_MdHr}+ol>li,
#write @{n3Hr_MdHr}+ol>@{n2Li},
#write @{n3Hr_MdHr}+ol>@{n3Li},
#write @{n3Hr_MdHr}+ol>@{n4Li} {
    display: inline-block !important;
    // list-style-type: none;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
}
// 四栏列表内容之间的样式
#write @{n3Hr_MdHr}+ul>@{n2Li},
#write @{n3Hr_MdHr}+ul>@{n3Li},
#write @{n3Hr_MdHr}+ul>@{n4Li},
#write @{n3Hr_MdHr}+ol>@{n2Li},
#write @{n3Hr_MdHr}+ol>@{n3Li},
#write @{n3Hr_MdHr}+ol>@{n4Li} {
    margin-left: 2% !important;
}
// 每四个分栏首个列表微调
#write @{n3Hr_MdHr}+ul>@{n2Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ul>@{n3Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ul>@{n4Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n2Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n3Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n4Li}:nth-of-type(4n+1) {
    margin-left: 0 !important;
}
// 四栏的有序列表微调
#write @{n3Hr_MdHr}+ul ol>li,
#write @{n3Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以五栏方式显示列表，19.2*5+1*4=100
#write @{n4Hr_MdHr}+ul>li,
#write @{n4Hr_MdHr}+ul>@{n2Li},
#write @{n4Hr_MdHr}+ul>@{n3Li},
#write @{n4Hr_MdHr}+ul>@{n4Li},
#write @{n4Hr_MdHr}+ul>@{n5Li},
#write @{n4Hr_MdHr}+ol>li,
#write @{n4Hr_MdHr}+ol>@{n2Li},
#write @{n4Hr_MdHr}+ol>@{n3Li},
#write @{n4Hr_MdHr}+ol>@{n4Li},
#write @{n4Hr_MdHr}+ol>@{n5Li} {
    display: inline-block !important;
    vertical-align: top;
    max-width: 19.2% !important;
    min-width: 19.2% !important;
}
// 五栏列表内容之间的样式
#write @{n4Hr_MdHr}+ul>@{n2Li},
#write @{n4Hr_MdHr}+ul>@{n3Li},
#write @{n4Hr_MdHr}+ul>@{n4Li},
#write @{n4Hr_MdHr}+ol>@{n2Li},
#write @{n4Hr_MdHr}+ol>@{n3Li},
#write @{n4Hr_MdHr}+ol>@{n4Li} {
    margin-left: 1% !important;
}
// 每五个分栏首个列表微调
#write @{n4Hr_MdHr}+ul>@{n2Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n3Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n4Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n5Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n2Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n3Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n4Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n5Li}:nth-of-type(5n+1) {
    margin-left: 0 !important;
}
// 五栏的有序列表微调
#write @{n4Hr_MdHr}+ul ol>li,
#write @{n4Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// 引用块内的引用块（非分栏）
#write :is(blockquote, li)>blockquote,
// 详情内的折叠引用块（非分栏）
#write @{quote_details}>details {
    border-left: @quoteBorderWidth solid fade(@accColorGray, 20%);
    background: none;
    border-radius: 0;
    padding: 0 .5em;
}
// 引用块内的最后一个引用块
#write @{quote_details}>@{quote_details}:last-child,
#write @{quote_details}>:is(ol,ul):last-child {
    margin-bottom: 0;
}

// 引用块的引用块（分栏）
#write :is(li>hr, li>.md-hr)+:is(blockquote, blockquote+blockquote, blockquote+blockquote+blockquote, blockquote+blockquote+blockquote+blockquote),
#write :is(li>hr, li>.md-hr)+:is(details, details+details, details+details+details, details+details+details+details) {
    border: none;
    background: var(--blockquote-bg);
    border-radius: var(--v-r-s);
    padding: .75em 1em;
}

#write @{quote_details}>strong {
    color: inherit !important;
}

// 无效图片样式
.v-img-lost {
    background-image: url("") !important;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 200px;
    height: 100px;
}
.v-img-lost::before {
    content: "\a\a\a\a\a\a\a\a\a\a"; // 将无效图片的错误提示图移出显示区域
}

// 坏链列表
.v-link-error-list {
    display: none;
    // padding: 10px 0;
    padding: 0;
    position: fixed;
    color: var(--d-fc);
    top: 20px;
    right: 20px;
    bottom: 50px;
    width: var(--v-nav-center-w);
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b);
    background: var(--pn-c);
    overflow: auto;
    z-index: 4500;
}
.v-link-error-list-header {
    display: none;
    position: absolute;
    z-index: 10;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    // background: linear-gradient(180deg, var(--pn-c) 10px, var(--pn-c-tsp));
    background: linear-gradient(180deg, @pnLinerGradientFade2);
    pointer-events: none;
}
.v-link-error-list-body {
    // padding: 10px 0;
    padding: 5px 1px;
    height: 100%;
    z-index: 0;
}
.v-link-error-list-items {
    overflow-y: scroll;
    height: 100%;
    z-index: 0;
}
.v-link-error-list-footer {
    position: absolute;
    z-index: 10;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    top: auto;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    // background: linear-gradient(0deg, var(--pn-c) 10px, var(--pn-c-tsp));
    background: linear-gradient(0deg, @pnLinerGradientFade2);
    pointer-events: none;
}

.v-status-bar {
    position: fixed;
    justify-content: center;
    align-items: center;
    border-radius: var(--v-r-s);
    right: 20px;
    bottom: 20px;
    height: 30px;
    z-index: 100;
}
// 状态栏内第 1 个元素
.v-status-bar>div:first-child {
    border-top-left-radius: var(--v-r-s);
    border-bottom-left-radius: var(--v-r-s);
    border: none;
}
// 状态栏内最后 1 个元素
.v-status-bar>div:last-child {
    border-top-right-radius: var(--v-r-s);
    border-bottom-right-radius: var(--v-r-s);
    // border: none;
}

.v-status-bar>.v-doc-info,
.v-status-bar>.v-sts-font-theme,
.v-status-bar>.v-color-scheme,
.v-status-bar>.v-link-chk-result {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--d-fc);
    background: var(--pn-c);
    padding: 0 10px;
    min-width: var(--v-tb-btn-w);
    height: 30px;
    opacity: .6;
    cursor: pointer;
}

// 文档信息
.v-doc-info {
    font: normal .75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    cursor: default;
}

// 鼠标悬停在状态栏图标效果
.v-sts-font-theme.hover,
.v-color-scheme.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}
.v-sts-font-theme.hover use,
.v-color-scheme.hover use {
    fill: @buttonForeHoverColor !important;
}

// 链接检查结果
.v-link-chk-result {
    cursor: pointer;
    background: var(--ac-bu-lg);
    opacity: 1;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
}
.v-link-chk-result.error {
    background: var(--ac-rd-lg);
}
// .v-link-result-error:hover {
//     background: var(--d-fc);
// }
// .v-link-result-error:hover>svg>use {
//     fill: var(--d-bc);
// }
// .v-link-result-error:active {
//     background: var(--ac-rd-lg);
//     box-shadow: 0 0 0 2px fade(@accColorRed, 50%);
// }
// .v-link-result-error:active>svg>use {
//     fill: #FFFFFF;
// }

.v-link-error-source:focus {
    outline: 2px dashed var(--ac-rd-lg);
}

// table.md-grid-board 是编辑时表格行列调整面板的样式
:is(#write, body.typora-export) table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: @defaultLineHeight;
    word-break: break-all;
    white-space: pre-wrap;
    border: @tableBorderWidth solid @tableBorderColor;
    border-left-width: @tableBorderLeftWidth;
    border-right-width: @tableBorderRightWidth;
    border-top-width: @tableBorderTopWidth;
    border-bottom-width: @tableBorderBottomWidth;
    border-radius: @tableBorderRadius;
    background: @tableBackground;
}
:is(#write, body.typora-export) table[d-row-group],
:is(#write, body.typora-export) table[d-col-too-more] {
    white-space: pre;
}

// 避免分页后重复显示表头
#write thead {
    display: contents !important;
}

// 表格表头
:is(#write, body.typora-export) table>thead>tr>th {
    color: @tableThColor !important;
    background: @tableThBackground;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    border-right: @tableThBorderRightWidth solid var(--tbl-cell-bd);
    margin: 0;
    padding: var(--tbl-cell-padding);
    box-shadow: @tableThBoxShadow;
}

:is(#write, body.typora-export) table td {
    border-right: @tableTdBorderRightWidth solid var(--tbl-cell-bd);
    margin: 0;
    padding: var(--tbl-cell-padding);
    vertical-align: top;
}

// thead 首行
:is(#write, body.typora-export) table>thead>tr:first-child>th {
    box-shadow: @tableFirstThBoxShadow;
}

// thead 非首行
:is(#write, body.typora-export) table>thead>tr:not(:first-child)>th {
    box-shadow: @tableThBoxShadow;
}

// table 行 hover，阅读模式（十字光标）未启用时
:is(#write, body.typora-export) table:not([d-tbl-cross="true"])>tbody>tr:hover {
    background: var(--tbl-tr-hv) !important;
}

// tbody 首行
:is(#write, body.typora-export) table>tbody>tr:first-child>td {
    box-shadow: @tableFirstTdBoxShadow;
}
#write .v-tr-repeater+tr>td {
    box-shadow: @tableFirstTdBoxShadow !important;
}
// 非首行
:is(#write, body.typora-export) table>tbody>tr:not(:first-child)>td {
    box-shadow: @tableTdBoxShadow;
}

// 偶数行
:is(#write, body.typora-export) table>tbody>tr:nth-child(2n) {
    background: @tableTdBackground;
}

// 表头首行的首列
:is(#write, body.typora-export) table>thead>tr:first-child>th:first-child {
    border-top-left-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表头首行的尾列
:is(#write, body.typora-export) table>thead>tr:first-child>th:last-child {
    border-top-right-radius:calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首列
:is(#write, body.typora-export) table>tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的尾列
:is(#write, body.typora-export) table>tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: calc(@tableBorderRadius - 1px);//var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格首列
:is(#wirte, body.typora-export) table tr>:is(th, td):first-child {
    // white-space: pre !important; // 表格首列默认不换行
}
// 表格末列
:is(#write, body.typora-export) table tr>:is(th, td):last-child {
    border-right: 0;
}

// 空白单元格
:is(#write, body.typora-export) .v-empty-cell {
    padding: 1px !important;
    background: var(--tbl-h-bd) !important;
}
// 非首行内的空白单元格
:is(#write, body.typora-export) table>tbody>tr:not(:first-child)>td.v-empty-cell {
    box-shadow: none !important;
}

// 重复表头所在行，强制取消行号显示
#write .v-tr-repeater::before {
    content: "" !important;
}

// 重复表头样式
#write .v-th-repeater {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    color: @tableThColor;
    background: @tableThBackground;
    // background: (--tbl-th-bg);
    vertical-align: middle !important;
}
#write .v-th-repeater.first {
    box-shadow: @tableThRepeaterBoxShadow;
}
#write .v-th-repeater.not-first {
    box-shadow: @tableThBoxShadow !important;
}

// 合并了所有列样式
.v-table-colspan-all {
    padding-left: 5px;
    background: var(--tbl-th-bg);
}
// 空白行，不显示对应的行号
.v-table-colspan-all::before {
    content: "";
}

// 表格列格式：加粗
.v-tbl-col-fmt-bold {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

// 表格列格式：斜体
.v-tbl-col-fmt-em {
    font-style: italic;
}

// 下划线
// .v-tbl-col-fmt-u span,
#write u {
    text-decoration: none;
    border-bottom: 1px solid var(--d-fc);
}
// #write u>u {
//     font-size: .75em;
// }

// 表格列格式：高亮
.v-tbl-col-fmt-mark {
    background: var(--mark-bg) !important;
    // text-shadow: 0 1px 0 var(--d-bc);
    font-weight: var(--v-f-w-bd);
    color: var(--d-fc) !important;
}

// 表格列格式：数值
.v-tbl-col-fmt-num {
    font-family: var(--v-f-fm-num) !important;
}
.v-tbl-col-fmt-num>span {
    font-size: 1.125em;
}
// 表格列格式：负数
.v-tbl-col-fmt-num-positive {
    color: #D00000;
}
// 表格列格式：正数
.v-tbl-col-fmt-num-negative {
    color: #00B000;
}
// 表格列格式：数值－小数部分
.v-tbl-col-fmt-num-decimal {
    font-size: .8em;
}
// 表格列格式：数值－货币
.v-tbl-col-fmt-currency {
    float: left;
    font-weight: normal;
    font-size: .8em;
    padding-top: 3px;
    padding-right: 10px;
    color: var(--d-fc-a);
}
// 表格列格式：数值－百分号
.v-tbl-col-fmt-percent {
    opacity: .6;
    font-size: .8em;
}

// 带表格带行折叠时，是目录行的样式
.v-tbl-row-g-folder {
    text-align: left !important;
}
// .v-tbl-row-g-folder>.folder-marker {
//     color: var(--h-f);
// }

// 带表格带行折叠时，不是目录行的样式（有行自动编号）
:is(#write, body.typora-export) :is(li>figure, h6+figure) table tbody>tr>td.v-tbl-row-g-not-folder {
  text-align: left !important;
  padding-left: 50px !important;
}
// 带表格带行折叠时，不是目录行的样式（无行自动编号）
td.v-tbl-row-g-not-folder {
    text-align: left !important;
    padding-left: 25px !important;
}

// 折叠按钮样式
.v-tbl-row-g-btn {
    line-height: @miniLineHeight;
    vertical-align: middle;
    cursor: pointer;
}

.v-tbl-row-g-btn.hover>svg>use {
    fill: @aHoverColor !important;
}
.v-tbl-row-g-btn.hover:active>svg>use {
    fill: @aActiveColor !important;
}

// 被折叠行的样式
.v-tbl-row-g-sub {
    text-align: left !important;
    padding-left: 5px !important;
}

// 缩进的占位元素样式
.v-tbl-row-g-identer {
    width: 4px;
    height: 32px;
    display: inline-block;
    padding: 0;
    margin: -10px 32px -10px 4px;
}
// 带表格行号的样式微调
#write :is(h6+figure, li>figure) table .v-tbl-row-g-identer {
    margin-right: 58px;
}

// 连续缩进的占位元素进行修正
.v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-left: -12px !important;
}
// 带表格行号的样式微调
#write :is(h6+figure, li>figure) table .v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-right: 30px !important;
}

// 缩进的单元格为目录节点
.v-tbl-row-g-identer-folder {
    margin-right: 12px;
}
// 带表格行号的样式微调
#write :is(h6+figure, li>figure) table .v-tbl-row-g-identer-folder {
    margin-right: 38px !important;
}
// 连续缩进的占位元素修正
#write :is(h6+figure, li>figure) table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder {
    margin-right: 10px !important;
}

// li/header 下的表格增加表格行号
#write :is(li>figure, h6+figure) table {
    counter-reset: tableRowNumber - 1;
}

#write :is(li>figure, h6+figure) table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
#write figure table tr::before {
    content: "";
    color: var(--h-f);
    font: normal normal .8em var(--v-f-fm-num) !important; // [style] [weight] [size/[line-height]] [family]
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: 1em;
    padding-top: 5px;
}

// 列表下的表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
#write li>figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    margin-left: -20px;
    //color: var(--d-fc-a);
    color: var(--h-f);
    position: absolute;
}
// hover 时行号内容样式
#write li>figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
}

// 表格折叠后强制隐藏表格行号
.v-tbl-row-num-hidden::before {
    content: "" !important;
}

// h6 下的表格行号
#write h6+figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    // margin-left: 0px;
    color: var(--h-f);
    position: absolute;
}
body.typora-export #write h6+figure table tbody tr::before {
    left: -.5em;
}

// hover 时行号内容样式
#write h6+figure table tbody tr:hover::before {
// :is(#write, body.typora-export) h6+figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
}

// 应显示表格行的表格的首列
#write :is(li>figure, h6+figure) table tr>:is(th, td):first-child {
    padding-left: 30px;
}

// li/header 后的表格，格式微调
#write li>figure {
    margin-top: 0;
}

// h1-6 后的表格，格式微调
// #write :is(h1,h2,h3,h4,h5,h6)+figure {
//     margin-top: 0;
// }

// 表格阅读模式（十字光标）
.v-tbl-x {
    top: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.v-tbl-x-cell {
    box-shadow: 0 0 0 4px var(--d-fc-a) !important;
    border-radius: @tableBorderRadius;
}
.v-tbl-x.left-up {
    background: linear-gradient(315deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-bottom-right-radius: @tableBorderRadius;
}
.v-tbl-x.right-up {
    background: linear-gradient(45deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-bottom-left-radius: @tableBorderRadius;
}
.v-tbl-x.left-down {
    background: linear-gradient(210deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-top-right-radius: @tableBorderRadius;
}
.v-tbl-x.right-down {
    background: linear-gradient(135deg, transparent, @tableCrossBgColor 20px, fade(@aLineColor, 1%));
    border-top-left-radius: @tableBorderRadius;
}

.v-table-wrap {
    white-space: pre-wrap !important;
}

.v-table-unwrap {
    white-space: pre !important;
}

// 高亮
mark {
    box-shadow: 0 -.9em 0 0 var(--mark-bg) inset;
    font-weight: var(--v-f-w-bd);
    color: inherit;
    background: none;
}

// 删除线
#write :is(del, del strong) {
    color: var(--d-fc-a) !important;
    text-decoration: line-through solid !important;
}

#write del code {
    text-decoration: line-through !important;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: .5em;
    padding-bottom: .5em;
}

// 弹层中的脚注行
.v-footnote-pn-content>.footnote-line {
    padding-bottom: 50px;
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accColorBlue;
}

.reversefootnote:hover {
    color: @accColorRed;
}

// 脚注上标
#write a[name^="ref-footnote-"] {
    font: normal .75em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    color: @accColorBlue;
}

#write a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
}

// .md-expand .md-inline-math-container>script,
@{inline_script}, // 行内公式
tt,
code {
    font: var(--v-f-w-text) .875em/@defaultLineHeight var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    color: var(--code-t);
    background: var(--code-bg);
    border-radius: var(--v-r-s);
    padding: 3px 5px;
    line-height: 1;
    margin: 0;
    border: 1px solid var(--std-code-shadow);
    // box-shadow: 0 0 0 1px var(--std-code-shadow) inset;
    display: inline-block;
    text-align: inherit;
    // vertical-align: middle;
}
.v-std-code {
    cursor: var(--cur-copy);
}
.v-std-code.hover {
    filter: brightness(@hoverBrightness);
}

// 引用块内的 code
#write blockquote code {
    color: var(--ac-t2-lg);
    background: var(--d-bc);
}
// 引用块内的表格中的 code
#write blockquote table code {
    color: var(--code-t);
    background: var(--code-bg);
}

strong :is(tt, code) {
    font-weight: var(--v-f-w-bd);
}

// 生成题注后的样式调整，未生成题注前的样式主要在编辑时使用
.v-caption>.md-fences {
    margin: 0;
}

// // 预览：数学公式
// .mathjax-block>.code-tooltip {
//     bottom: .375em;
// }

.md-tag {
    color: inherit;
}


/**************************************
* 数学公式
**************************************/

@codeTooltipBg: var(--d-fc);
@codeTooltipText: var(--d-bc);
mjx-container>svg svg[data-labels] g,
.code-tooltip mjx-container>svg svg[data-labels] g {
    fill: var(--d-fc-a) !important;
}

// 编辑时，行内数学公式
// for macOS
body.html-for-mac content>#write .md-inline-math mjx-container {
    font-size: .66em !important;
}

// 预览：公式、脚注
.code-tooltip,
.md-hover-tip .code-tooltip-content {
    background: @codeTooltipBg !important;
    color: @codeTooltipText !important;
    border-radius: var(--v-r-b) !important;
}

.code-tooltip mjx-container>svg g {
    fill: @codeTooltipText !important;
}

// 浮层箭头
.md-hover-tip .md-arrow:after {
    background: @codeTooltipBg;
}

// 行间公式右上角标签
.md-rawblock .md-rawblock-tooltip {
    border-radius: var(--v-r-t) var(--v-r-t) 0 0;
}
// 行间公式容器
.md-math-container {
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b);
}

// 行间公式区
.md-math-block {
    border-radius: var(--v-r-b);
}
// 编辑时
.md-rawblock-before {
// .md-rawblock-control:not(.md-rawblock-tooltip) {
    border-radius: var(--v-r-b) 0 0 0;
}
.md-rawblock-input,
.md-rawblock-input :is(.CodeMirror-scroll, .CodeMirror.cm-s-inner) {
    border-radius: 0 !important;
}
.md-rawblock-after {
    border-radius: 0 0 var(--v-r-b) var(--v-r-b) !important;
}
.md-math-block.md-focus .CodeMirror-sizer {
    box-shadow: var(--v-input-focus-inn-shadow);//, var(--v-input-focus-shadow);
}

// 行内公式（编辑时）
@inline_script: ~".md-expand .md-inline-math-container>script";
@{inline_script} {
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
}

// 公式链接
// mjx-container>svg a g[data-mml-node="mtext"] {
//     fill: var(--a-color) !important;
// }
// mjx-container>svg a:hover g[data-mml-node="mtext"] {
//     fill: @aHoverColor !important;
// }
// mjx-container>svg a:active g[data-mml-node="mtext"] {
//     fill: @aHoverColor !important;
// }

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

#write {
    counter-reset: h1;
}

#write h1 {
    counter-reset: h2;
}

#write h2 {
    counter-reset: h3;
}

#write h3 {
    counter-reset: h4;
}

#write h4 {
    counter-reset: h5;
}

#write h5 {
    counter-reset: h6;
}

#write :is(h1,h2,h3,h4,h5,h6)::before,
#write :is(h1,h2,h3,h4,h5,h6)::after {
    color: @contentHeaderNumColor;
    letter-spacing: 0;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
}

#write h1::before {
    counter-increment: h1;
    content: @h1BeforeContent;
}

#write h2::before {
    counter-increment: h2;
    content: @h2BeforeContent;
}

#write h3::before {
    counter-increment: h3;
    content: @h3BeforeContent;
}

#write h4::before {
    counter-increment: h4;
    content: @h4BeforeContent;
}

#write h5::before {
    counter-increment: h5;
    content: @h5BeforeContent;
}

#write h6::before {
    content: var(--h6-prefix);//@h6BeforeContent;
}

// 导出 HTML 后的文档章节目录的自动编码内容
body.typora-export #write :is(h1,h2,h3,h4,h5,h6)::before {
    content: attr(d-header-num) !important;
}

kbd {
    font: var(--v-f-w-bd) .75em var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    border-radius: var(--v-r-s-small);
    margin: 0;
    padding: 0 4px;
    color: var(--d-bc);
    border: 2px solid var(--key-shadow);
    border-left-color: var(--key-reflect);
    border-top-color: var(--key-reflect);
    background: var(--key-bg);
    box-shadow: 0 0 0 1px var(--key-shadow);
}

table kbd {
    display: inline-block;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// 聚光灯模式
.v-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    z-index: 5000;
}

// 在 Dark 模式时对文档内容的微调处理
.v-spotlight-in-dark {
    filter: brightness(1.2);
}

// 激光笔鼠标形状
.v-cursor-laser {
    cursor: url(""), auto !important;
}

// 过渡效果样式集
.v-transition-all {
    transition: all var(--v-trans-dur) ease-out;
}
.v-transition-box-shadow {
    transition: box-shadow var(--v-trans-dur) ease-out;
}
.v-transition-opacity {
    transition: opacity var(--v-trans-dur) ease-out;
}
.v-transition-left {
    transition: left var(--v-trans-dur) ease-out;
}
.v-transition-background {
    transition: background var(--v-trans-dur) ease-out;
}

.v-tool-tips,
.v-info-tips {
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border: 1px solid var(--tbl-bd);
    border-radius: 0 var(--v-r-b) var(--v-r-b) var(--v-r-b);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    cursor: default;
    z-index: 3000;
}
.v-info-tips.error {
    color: #FFFFFF;
    border-color: var(--ac-rd-lg);
    background: var(--ac-rd-lg);
    padding: 5px 10px;
}
.v-info-tips.bubble {
    color: var(--d-bc);
    border-color: var(--d-fc-a);
    background: var(--d-fc);
    padding: 5px 10px;
}

.v-tool-tips {
    visibility: hidden;
    opacity: 0;
    display: block;
    border-top-width: 0;
    box-shadow: 0 2px 0 0 @aLineColor inset, var(--v-float-shadow), @contrastBorder;
    text-align: left;
    white-space: pre;
    font-size: .875em;
}
// 提示对象在上半屏
.v-tool-tips.top.center {
    border-radius: var(--v-r-b);
}
.v-tool-tips.top.right {
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b);
}
// 提示对象在下半屏
.v-tool-tips.bottom {
    box-shadow: 0 -2px 0 0 @aLineColor inset, var(--v-float-shadow), @contrastBorder;
    border-top-width: 1px;
    border-bottom-width: 0;
}
.v-tool-tips.bottom.center {
    border-radius: var(--v-r-b);
}
.v-tool-tips.bottom.right {
    border-radius:var(--v-r-b) var(--v-r-b) 0 var(--v-r-b);
}

.v-tool-tips.accent {
    box-shadow: 0 2px 0 0 @buttonBgColor inset, var(--v-float-shadow), @contrastBorder;
}

:is(.v-tool-tips, .v-info-tips) a {
    font-weight: var(--v-f-w-bd);
    text-decoration: none;
}

// 底部信息栏
.v-bottom-tips {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: #FFFFFF;
    text-shadow: 0 1px #000000;
    width: 100%;
    height: 60px;
    text-align: center;
    bottom: 0;
    padding-top: 16px;
    background: linear-gradient(0deg, #000000, transparent);
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 5001;
}
.v-bottom-tips>div {
    bottom: 10px;
    width: 100%;
    position: fixed;
}
.v-bottom-tips kbd {
    margin: 0 4px;
    text-shadow: none;
    color: var(--d-bc-dk);
    border: 3px solid var(--key-shadow-dk);
    border-left-color: var(--key-reflect-dk);
    border-top-color: var(--key-reflect-dk);
    background: var(--key-bg-dk);
    box-shadow: 0 0 0 1px var(--key-shadow-dk);
}

// 字体风格选择器
.v-font-theme {
    display: none;
    position: fixed;
    padding: 10px;
    text-align: center;
    border-radius: var(--v-r-b);
    border: 1px solid var(--tbl-bd);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    z-index: 3000;
}
.v-font-theme>.v-font-theme-opt {
    vertical-align: top;
    display: inline-block;
    margin: 0 0 30px 10px;
}
.v-font-theme>.v-font-theme-opt:first-child {
    margin-left: 0;
}

// 字体风格选择器字体包下载提示
.v-font-theme-info {
    font-size: .75em;
    width: 600px;
    margin: auto;
    overflow: auto;
    border-radius: var(--v-r-s);
}

// 字体风格选项：系统默认
.v-font-theme-opt-local,
// 字体风格选项：Book
.v-font-theme-opt-book,
// 字体风格选项：小清新
.v-font-theme-opt-sans,
// 字体风格选项：文艺范
.v-font-theme-opt-serif {
    border-radius: var(--v-r-s) !important;
    filter: opacity(.6);
    cursor: pointer;
    background-color: var(--d-fc);
    color: var(--d-bc);
    min-height: 200px;
}

// 字体风格选项鼠标事件效果
.v-font-theme-opt-local:hover,
.v-font-theme-opt-book:hover,
.v-font-theme-opt-sans:hover,
.v-font-theme-opt-serif:hover {
    filter: opacity(1);
    box-shadow: 0 0 0 2px @aLineColor;
}
.v-font-theme-opt-local:active,
.v-font-theme-opt-book:active,
.v-font-theme-opt-sans:active,
.v-font-theme-opt-serif:active {
    box-shadow: 0 0 0 2px @aActiveColor;
}

// 当前选择的字体风格选项
.v-font-theme-opt-local.selected,
.v-font-theme-opt-book.selected,
.v-font-theme-opt-sans.selected,
.v-font-theme-opt-serif.selected {
    box-shadow: 0 0 0 4px var(--h-f) !important;
    filter: opacity(1) !important;
}

// 字体包信息
.v-fontinfo-local,
.v-fontinfo-book,
.v-fontinfo-sans,
.v-fontinfo-serif {
    margin-top: 10px;
    text-align: left;
    font-size: .875em;
}
// 字体包加载状态
.v-fontinfo-local>#fontset-status,
.v-fontinfo-book>#fontset-status,
.v-fontinfo-sans>#fontset-status,
.v-fontinfo-serif>#fontset-status,
.v-doc-ext-info {
    color: var(--d-fc-a);
}

// 生成柔和自然的透明渐变色
// 这两项数据的调整，须通过 src/calc-ref.xlx 进行计算生成
@linerGradientFade: ~"rgba(var(--fade-r), var(--fade-g), var(--fade-b), 1) 0%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.987) 8.1%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.951) 15.5%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.896) 22.5%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.825) 29%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.741) 35.3%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.648) 41.2%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.55) 47.1%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.45) 52.9%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.352) 58.8%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.259) 64.7%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.175) 71%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.104) 77.5%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.049) 84.5%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.013) 91.9%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0) 100%";
@linerGradientFade2: ~"rgba(var(--fade-r), var(--fade-g), var(--fade-b), 1) 42%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.987) 46.698%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.951) 50.99%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.896) 55.05%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.825) 58.82%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.741) 62.474%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.648) 65.896%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.55) 69.318%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.45) 72.682%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.352) 76.104%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.259) 79.526%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.175) 83.18%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.104) 86.95%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.049) 91.01%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.013) 95.302%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0) 100%";

// need removed:
// 长内容扩展面板
// .v-content-expander {
//     font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
//     height: 110px;
//     margin-top: -7.375em;//-120px;
//     // background: linear-gradient(0deg, var(--d-bc) 10px, var(--d-bc-tsp));
//     background: linear-gradient(0deg, @linerGradientFade);
//     border-radius: 0 0 var(--v-r-b) var(--v-r-b);
//     position: absolute;
//     text-align: center;
//     vertical-align: bottom;
//     visibility: hidden;
//     z-index: 10;
//     pointer-events: none;
// }

// need removed:
// .v-content-expander>.v-btn {
//     color: var(--d-fc);
//     margin-top: 60px;
//     width: auto;
//     padding-left: 15px;
//     padding-right: 15px;
//     font-size: .875em;
//     border-radius: var(--v-r-s);
//     background: var(--std-code-shadow);//@buttonBgColor;
//     pointer-events: all;
// }
// .v-content-expander>.v-btn>svg>use {
//     fill: var(--d-fc);
// }
// .v-content-expander>.v-btn.hover {
//     background-color: var(--d-fc) !important;
//     color: var(--d-bc) !important;
// }
// .v-content-expander>.v-btn.hover>svg>use {
//     fill: var(--d-bc);
// }

// Light Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-light {
    margin-top: 100px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-lg);//url(@themeLogoLight);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

// Dark Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-dark {
    display: none;
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-dk);//url(@themeLogoDark);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

.v-welcome-page {
    cursor: wait;
    position: fixed;
    color: @buttonForeColor;
    background: @buttonBgColor;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 6000;
}

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    100% {
        opacity: .8;
        transform: scale(1);
        filter: brightness(1);
    }
}

.v-welcome-page>.v-tips {
    font: var(--v-f-w-title) 1.75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    padding: 20px 20px 10px 20px;
}

.v-welcome-page>.v-tips>div {
    text-align: center;
    line-height: @miniLineHeight;
    margin-bottom: 50px;
}
.v-welcome-page>.v-tips>.v-date {
    font-weight: normal;
    font-size: .625em;
    margin-bottom: 20px;
}
.v-welcome-page>.v-tips>.v-author {
    font-weight: normal;
    font-size: .875em;
    margin-bottom: 20px;
}
.v-welcome-page>.v-tips>.v-author::before {
    content: "by";
    font-size: .625em;
    opacity: .6;
    display: block;
    margin-bottom: .375em;
}

.v-welcome-page>.v-loading {
    cursor: not-allowed;
    padding: .2em .5em;
    border: 1px solid @buttonForeColor;
    font: italic normal 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    display: inline-block;
    border-radius: var(--v-r-b);
    margin-bottom: 2em;
    opacity: .5;
}

.v-welcome-page>.v-btn-done {
    cursor: pointer;
    border: 2px solid @buttonForeHoverColor;
    font-style: normal;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    opacity: 1;
    animation: breathe-button 1s ease 1 alternate;
}
.v-welcome-page>.v-btn-done:hover {
    color: @aLineColor;
    background: @buttonForeHoverColor;
    box-shadow: var(--v-float-shadow);
}
.v-welcome-page>.v-btn-done:active {
    border: none;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    box-shadow: 0 0 0 2px fade(@aLineColor, 50%);
    transform: none;
}

.v-welcome-page>.v-btn-done.wait {
    animation: breathe-button 1s 10 alternate;
}

.v-welcome-page>.v-btn-done>span {
    font-weight: normal;
}

// 用于段落导航
#write .v-pg-current-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: var(--v-r-b);
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
// .md-diagram-panel svg[viewBox^="-"],
// .v-fig-content svg[viewBox^="-"] {
:is(.md-diagram-panel, .v-fig-content) svg[viewBox^="-"]{
    padding-bottom: @scrollFix;
}

// .md-diagram-panel svg,
.v-fig-content svg:not([data-inject-url]) { // 跳过由 SVGInject 生成的 svg
    width: 100%;
}

.v-nav-center {
    background: var(--pn-c);
    border-radius: var(--v-r-b);
    cursor: default;
    display: block;
    left: var(--v-nav-center-hidden-l);
    top: 10px;
    bottom: 40px;
    width: var(--v-nav-center-w);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.v-nav-center-float {
    top: 20px;
    bottom: 50px;
    box-shadow: var(--v-float-shadow);
}

.v-nav-center-block {
    top: 60px;
    bottom: 10px;
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);
}

// 面板渐变样式
@pnLinerGradientFade: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 73%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.987) 75.187%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.951) 77.185%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.896) 79.075%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.825) 80.83%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.741) 82.531%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.648) 84.124%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 85.717%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 87.283%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.352) 88.876%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.259) 90.469%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.175) 92.17%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.104) 93.925%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.049) 95.815%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.013) 97.813%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
@pnLinerGradientFade2: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 0%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.987) 8.1%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.951) 15.5%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.896) 22.5%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.825) 29%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.741) 35.3%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.648) 41.2%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 47.1%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 52.9%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.352) 58.8%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.259) 64.7%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.175) 71%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.104) 77.5%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.049) 84.5%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.013) 91.9%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
@pnLinerGradientFade3: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 57%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.987) 60.483%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.951) 63.665%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.896) 66.675%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.825) 69.47%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.741) 72.179%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.648) 74.716%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 77.253%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 79.747%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.352) 82.284%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.259) 84.821%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.175) 87.53%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.104) 90.325%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.049) 93.335%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.013) 96.517%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";

// 导航中心头部
.v-nav-center-header {
    color: var(--d-fc);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    height: 110px;
    padding: 0;
    // background: linear-gradient(180deg, var(--pn-c) 82px, var(--pn-c-tsp));
    background: linear-gradient(180deg, @pnLinerGradientFade);
    left: 1px;
    right: 1px;
    top: 1px;
    position: absolute;
    border-top-right-radius: var(--v-r-b);
    border-top-left-radius: var(--v-r-b);
    z-index: 10;
    pointer-events: none;
}
// 导航中心尾部
.v-nav-center-footer {
    height: 30px;
    line-height: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    padding: 0;
    // background: linear-gradient(0deg, var(--pn-c) 5px, var(--pn-c-tsp));
    background: linear-gradient(0deg, @pnLinerGradientFade2);
    border-bottom-right-radius: var(--v-r-b);
    border-bottom-left-radius: var(--v-r-b);
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

// 导航中心标签栏
.v-segment {
    text-align: center;
    height: calc(var(--v-seg-h) + 4px);
    border-radius: var(--v-r-s);
    margin: 10px;
    padding: 2px;
    background: var(--pn-c-a);
    pointer-events: all;
}
// 导航中心标签栏按钮
.v-segment>input[type="radio"] {
    display: none;
}
.v-segment>input[type="radio"]:checked+.v-segment-btn>svg>use {
    fill: @buttonForeColor;
}

.v-segment>input[type="radio"][d-result="none"]+label,
.v-result-none {
    opacity: .2;
    cursor: not-allowed;
}

.v-segment-indicator {
    position: absolute;
    left: 12px;
    top: 52px;
    width: 40px;
    height: var(--v-seg-h);
    // height: 30px;
    background: @buttonBgColor;
    border-radius: calc(var(--v-r-s) - 1px);
    z-index: 0;
}
.v-segment-indicator>svg>use {
    fill: @buttonForeColor;
}

.v-segment-btn {
    width: 16%;
    height: var(--v-seg-h);
    // height: 30px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: calc(var(--v-r-s) - 1px);
    float: left;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    z-index: 10;
}
.v-segment-btn.hover {
    background: @aHoverColor;
}
.v-segment-btn.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-segment-btn:active {
    background: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
}
.v-segment-btn:active>svg>use {
    fill: @buttonForeHoverColor;
}
// 大纲索引 tab
.v-segment-btn.catalog {
    margin: 0 .8% 0 0;
}
// 插图索引 tab
.v-segment-btn.figure {
    margin: 0 .8% 0 0;
}
// 表格索引 tab
.v-segment-btn.table {
    margin: 0 .8% 0 0;
}
// 多媒体索引 tab
.v-segment-btn.media {
    margin: 0 .8% 0 0;
}
// 代码块索引 tab
.v-segment-btn.codeblock {
    margin: 0 .8% 0 0;
}
// 访问历史 tab
.v-segment-btn.history {
    margin: 0;
}

.v-nav-center-body {
    width: 100%;
    height: 100%;
    padding: 70px 1px 5px 1px;
    border-radius: var(--v-r-b);
    overflow: auto;
    overflow-y: hidden;
}

.v-toc-catalog-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-y: scroll;
}
.v-toc-catalog-body::after {
    content: attr(d-catalog-empty);
    color: var(--d-fc-a);
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
}
.v-toc-catalog-body:not(:empty)::after {
    content: "";
}

.v-toc-handle {
    position: fixed;
    display: none;
    top: 390px;
    left: 8px;
    width: 4px;
    height: 80px;
    background: var(--tbl-bd);
    border-radius: 2px;
    z-index: 2000;
}
.v-toc-handle.hover {
    background: var(--d-fc);
}

.v-copyright-svg-ico {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
body.typora-export .v-copyright {
// .v-copyright {
    left: 0;
    bottom: 5px;
    text-align: center;
    width: 100%;
    // height: 40px;
    padding: 5px 10px;
    font: normal .875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    position: absolute;
    color: #FFFFFF !important;
    border: none;
}
body.typora-export .v-copyright a {
// .v-copyright a {
    color: #FFFFFF !important;
    border-bottom: @aBorderWidth solid #FFFFFF;
    text-shadow: none;
    text-decoration: none;
}
body.typora-export .v-copyright a:hover {
// .v-copyright a:hover {
    box-shadow: 0 -.3em 0 0 rgba(255, 255, 255, .3) inset;
}
body.typora-export .v-copyright a:active {
// .v-copyright a:active {
    background: #000000;
    border-radius: var(--v-r-s);
    border-bottom: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
    transition: none;
}

.v-float-card {
    box-shadow: var(--v-float-shadow), @contrastBorder;
}
.v-float-card2 {
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);//0 0 0 1px rgba(0, 0, 0, .3);
}

.v-footnote-pn {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: 90px;
    height: 200px;
    border-radius: var(--v-r-b);
    box-shadow: var(--v-float-shadow);
    // margin: 0 auto;
    margin: 0;
    padding: 5px 0;
    background: var(--pn-c);
    display: none;
    z-index: 2100;
}

body.typora-export .v-footnote-pn>a {
    color: var(--d-fc);
    text-decoration: none;
}

.v-footnote-pn-header {
    // height: 25px;
    // top: 2px;
    height: 30px;
    top: 0;
    // left: 2px;
    // right: 2px;
    left: 0;
    right: 0;
    position: absolute;
    // background: linear-gradient(180deg, var(--pn-c) 5px, var(--pn-c-tsp));
    background: linear-gradient(180deg, @pnLinerGradientFade2);
    border-radius: var(--v-r-b);
}

.v-footnote-pn-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

@footnoteFooterHeight: 70px;
.v-footnote-pn-footer {
    font-weight: var(--v-f-w-bd);
    height: @footnoteFooterHeight;
    // left: 2px;
    // right: 2px;
    left: 0;
    right: 0;
    //bottom: 2px;
    line-height: @footnoteFooterHeight + 10px;
    bottom: 0;
    padding: 5px 20px;
    // padding: 5px 0;
    // margin: 2px;
    margin: 0;
    border-radius: var(--v-r-b);
    // background: linear-gradient(0deg, var(--pn-c) 35px, var(--pn-c-tsp));
    background: linear-gradient(0deg, @pnLinerGradientFade3);
    position: absolute;
}

// --------------------
// 文档更多内容

// 更多内容的高度，该数据的调整后，须通过 src/calc-ref.xlx 进行计算重新生成 @linerGradientFade @linerGradientFade2 的值
@moreContentHeight: 70px;
// 顶部的样式（不是在封面时）
.v-more-doc-content-before {
    width: 100%;
    height: @moreContentHeight + @chapterNavHeight; // @chapterNavHeight 是章节导航栏的高度
    position: fixed;
    top: 0;
    pointer-events: none;
    display: none;
    opacity: .9;
    z-index: 99;
}
// 顶部的样式（在封面时）
.v-more-doc-content-before.cover{
    top: 0;
    height: @moreContentHeight;
}
// 底部的样式
.v-more-doc-content-after {
    width: 100%;
    height: @moreContentHeight;
    position: fixed;
    bottom: 0;
    pointer-events: none;
    display: block;
    opacity: .9;
    z-index: 99;
}
// 生成文档更多内容遮挡效果
.genMoreDocContentShadow() {
    .v-more-doc-content-before {
        background: linear-gradient(180deg, @linerGradientFade2);
    }
    .v-more-doc-content-before.cover{
        background: linear-gradient(180deg, @linerGradientFade);
    }
    .v-more-doc-content-after {
        background: linear-gradient(0deg, @linerGradientFade);
    }
}
// 生成文档更多内容遮挡效果
.genMoreDocContentShadow();

.v-toolbar {
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    left: 20px;
    top: 10px;
    padding: 10px;
    width: var(--v-nav-center-w);
    height: 50px;
    position: fixed;
    background: @buttonBgColor;
    display: none;
    z-index: 100;
}
.v-toolbar.cover {
    width: auto;
    right: 20px;
    background: none;
}

.v-toolbar-spliter {
    display: flex;
    width: 40px;
    height: 30px;
    padding: 0;
    float: right;
}

.v-toolbar-smallscreen {
    top: 50px;
    padding-left: 0;
    padding-right: 0;
}

// 用于替代默认的样式，但不设置 ::before
.v-toc-item,
.md-toc-item {
    color: var(--d-fc);
    font: normal 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    margin: 0 10px;
    // padding: 8px 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 5px;
    border-radius: var(--v-r-s);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: @miniLineHeight !important;
    cursor: pointer;
}
.v-toc-item {
    white-space: normal;
    line-height: @miniLineHeight;
    padding: 8px;
    margin-bottom: 5px;
    display: block;
}
.md-toc-item::before {
    color: var(--toc-h-num-color);
    padding-left: 5px;
}
.v-toc-item:hover,
.md-toc-item:hover {
    background: var(--pn-c-a);
}
.v-toc-item:active,
.md-toc-item:active {
    color: var(--d-bc);
    background: var(--d-fc-a);
    box-shadow: @tocItemActive_boxShadow;//0 0 0 2px fade(@headerColor, 50%);
    transition: none;
}
.v-toc-item:active::before,
.md-toc-item:active::before {
    color: var(--d-bc);
}
.v-toc-item:active>span {
    color: var(--d-bc);
}
:is(.v-toc-item:active, .md-toc-item:active) svg>use {
    fill: var(--d-bc);
}

:is(.v-toc-item, .v-cap-1, .v-cap-2)>span {  // 题注前缀
    color: var(--h-f);//var(--d-fc-a);
    // font-size: .75em;
    // padding-bottom: 4px;
}
.v-toc-item>span {
    display: block;
    font-size: .875em;
    margin-bottom: 4px;
}

.md-toc,
.v-toc {
    margin-top: 20px;
    margin-bottom: .5em;
    border-radius: 0;
    font-size: 1em;
    line-height: 2;
}

#write .md-toc-item a {
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: none;
}

#write .md-toc-item a:hover {
    color: var(--d-fc) !important;
    box-shadow: none;
    text-decoration: none;
    border: none;
}

.v-toc-item-current {
    font-weight: var(--v-f-w-title);
    background: var(--blockquote-bg);
    box-shadow: @tocItemCurrent_boxShadow;//0 0 0 2px fade(@headerColor, 50%) inset;
}

.v-toc-folder {
    float: left;
    width: 20px;
    // text-align: left;
    // text-align: center;
}
.v-toc-folder>svg {
    margin-top: 1px;
    float: left;
}

.v-toc-folder.hover>svg>use {
    fill: @aHoverColor !important;
}
.v-toc-folder.hover:active>svg>use {
    fill: @buttonForeColor !important;
}

.v-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
    width: var(--v-tb-btn-w);
    height: 30px;
    border-radius: var(--v-r-s);
}

// 按钮 pin 状态
.v-btn.selected {
    background: darken(@buttonBgColor, 20%) !important;
    box-shadow: @contrastBorder;
}

.v-btn.first {
    border-radius: var(--v-r-si) 0 0 var(--v-r-si) !important;
}
.v-btn.middle {
    border-radius: 0 !important;
}
.v-btn.last {
    border-radius: 0 var(--v-r-si) var(--v-r-si) 0 !important;
}

.v-btn.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

.v-btn.hover>svg>use {
    fill: @buttonForeHoverColor;
}

.v-btn.float,
.v-btn-group.float {
    background: @buttonBgColor;
    // box-shadow: none;
}
.v-btn-group>.v-btn.float {
    box-shadow: none;
    // background: @buttonBgColor;
}

.v-btn:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
    z-index: 1;
}

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.v-audio-mini-control.loading {
    animation: loading-circle 2s ease infinite;
}

.v-audio-mini-control {
    background: @buttonBgColor;
    border-radius: var(--v-r-c);
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    display: inline-flex;
    cursor: pointer;
}

.v-audio-mini-control.disabled {
    background: #B0B4B8;
    cursor: not-allowed;
}

.v-audio-mini-control.hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    color: @buttonForeHoverColor;
}

.v-audio-mini-control.hover:active {
    background: @aActiveColor;
}

.v-duration-info {
    color: var(--d-fc-a);
    padding: 0 5px;
    font-weight: bold;
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.v-audio-mini-control.playing {
    animation: breathe-circle 500ms infinite alternate;
}

@chapterNavHeight: 50px;
.v-chapter-nav {
    color: @buttonForeColor;
    background: @buttonBgColor;
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    top: -50px;
    left: calc(var(--v-nav-center-w) + 50px); // 注意 +/- 号前后须留空格
    right: 20px;
    height: @chapterNavHeight;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
}

.v-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-prev.noeffect.hover {
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
}
.v-chapter-nav-prev.effect.hover>svg>use,
.v-chapter-nav-prev.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-prev.effect.hover>.v-chapter-nav-prev-text,
.v-chapter-nav-prev.noeffect.hover>.v-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.noeffect:active,
.v-chapter-nav-prev.effect:active,
.v-chapter-nav-prev.effect:active::before {
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-prev-text {
    top: 0;
    left: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-chapter-nav-doc-title {
    font: normal .75em/24px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 22px !important;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-doc-title.in-start {
    margin-left: 15px;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    line-height: 50px;
    text-align: left;
    height: 50px !important;
    cursor: default;
}

.v-chapter-nav-current {
    font: var(--v-f-w-title) 1em/22px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    padding-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 28px;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-current>span {
    opacity: .75;
}
.v-chapter-nav-doc-title.effect.hover,
.v-chapter-nav-current.effect.hover {
    color: @buttonForeHoverColor;
}

// 无特效（effect=0）时使用的样式
.v-chapter-nav-doc-title.noeffect.hover,
.v-chapter-nav-current.noeffect.hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    height: 28px;
    color: @buttonForeHoverColor;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect::before,
.v-chapter-nav-current.effect::before {
    content: attr(d-header-num);
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 28px;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
}
.v-chapter-nav-doc-title.effect::before {
    top: 0;
    height: 22px;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect.hover::before,
.v-chapter-nav-current.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.noeffect:active,
.v-chapter-nav-doc-title.effect:active,
.v-chapter-nav-doc-title.effect:active::before,
.v-chapter-nav-current.noeffect:active,
.v-chapter-nav-current.effect:active,
.v-chapter-nav-current.effect:active::before {
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
}

.v-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-next.noeffect.hover {
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    border-bottom-right-radius: var(--v-r-b);
}
.v-chapter-nav-next.effect.hover>svg>use,
.v-chapter-nav-next.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-next.noeffect.hover>.v-chapter-nav-next-text,
.v-chapter-nav-next.effect.hover>.v-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    border-bottom-right-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-next.noeffect:active,
.v-chapter-nav-next.effect:active,
.v-chapter-nav-next.effect:active::before {
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-next-text {
    top: 0;
    right: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-btn-group {
    box-shadow: 0 0 0 1px fade(@buttonForeColor, 20%);
}
.v-btn-group.float {
    box-shadow: var(--v-float-shadow), @contrastBorder;
}

.v-btn-group>.v-btn {
    border-radius: 0;
}
.v-btn-group>.v-btn:first-child {
    border-radius: var(--v-r-s) 0 0 var(--v-r-s);
}
.v-btn-group>.v-btn:last-child {
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
}

.v-btn-group.prs {
    margin: 0;
    height: 30px;
    float: right;
    border-radius: var(--v-r-s);
    margin-left: var(--v-tb-btn-s);
}

// 辅助类按钮
.v-accent-btn {
    width: 40px;
    height: 30px;
    position: absolute;
    text-align: center;
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    cursor: pointer;
}

.v-accent-btn>svg>use {
    fill: @buttonBgColor;
}

.v-accent-btn.hover {
    background: var(--pn-c-a);
}

.v-accent-btn:active {
    color: var(--d-bc);
    background: var(--pn-c-a);
    box-shadow: 0 0 0 2px var(--tbl-bd);
}
.v-accent-btn:active>svg>use {
    fill: var(--d-bc);
}

.v-accent-btn+.v-textfield {
  margin: 0 10px 0 0;
}

.v-accent-btn.figure-nav.disabled {
    cursor:not-allowed;
}
.v-accent-btn.figure-nav.disabled>svg>use {
    fill: var(--pn-c-a);
}

.v-serch-by-keyword {
    display: block;
    margin: 10px;
    pointer-events: all;
}

.v-focus-serch.actived {
    filter: grayscale(50%) opacity(.5) !important;
}

// 输入框
.v-textfield {
    background: var(--d-bc);
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    margin: 0;
    height: 30px;
}
// 注意 box-shadow 如有多段，且使用动画变换样式
// 须保持内、外阴影样式设置的顺序要一致，否则动画变换会失效
.v-textfield-focus,
.v-textfield.hover-action {
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
}

body.typora-export :is(input::placeholder, input:focus::placeholder) {
    color: var(--d-fc-a);
    font-weight: normal;
}

// 输入框内的输入控件
.v-textfield>input {
    padding: 0;
    margin: 1px 0 0 10px;
    height: 28px;
    color: @aHoverColor;
    background: var(--d-bc);
    border: none;
    float: left;
    outline: 0 solid transparent;
    caret-color: @aHoverColor;
}
.v-textfield>input::input-placeholder,
.v-textfield>input::-webkit-input-placeholder,
.v-textfield>input::-moz-placeholder,
.v-textfield>input:-moz-placeholder {
    color: var(--d-fc-a) !important;
}
.v-textfield>input.set-icon {
    margin-left: 0;
}

.v-textfield-icon {
    width: 30px;
    height: 30px;
    padding: 7px;
    text-align: center;
    float: left;
    display: none;
}

// 输入框内的动作按钮
.v-textfield-action {
    width: 40px;
    height: 30px;
    text-align: center;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    box-shadow: 1px 0 0 0 var(--pn-c-a) inset;
    float: right;
    display: none;
}
.v-textfield-action.enabled {
    background: @buttonBgColor;
    box-shadow: none;
}
.v-textfield-action.enabled>svg>use {
  fill: @buttonForeColor;
  opacity: 1;
}
.v-textfield-action.hover {
    background: @aHoverColor;
    cursor: pointer;
}
.v-textfield-action.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-textfield-action.hover:active {
    background: @aActiveColor;
}

.v-textfield-reset {
    width: 30px;
    height: 30px;
    padding: 7px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    float: right;
    display: none;
    cursor: pointer;
}
.v-textfield-reset:hover>svg>use {
    opacity: .4;
}
.v-textfield-reset:active>svg>use {
    opacity: .6;
}

// tab 栏内按钮
.v-accent-btn.figure-nav {
    display: inline-block;
    margin: 0 10px 10px 10px;
}

.v-toc-filter-result,
.v-toc-history-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0 10px 0;
    overflow-y: scroll;
}
.v-toc-history-result {
    padding-top: 60px;
}

.v-toc-history-none,
.v-toc-filter-result-none {
    display: block;
    padding: 0 10px;
    text-align: center;
    color: var(--d-fc-a);
    font: normal 1em/3 var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
}

.v-toc-history-title {
    text-align: center;
    position: absolute;
    border-radius: var(--v-r-s);
    left: 10px;
    right: 10px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-family: var(--v-f-fm-subtitle);
    color: var(--d-fc-a);
}

.v-btn.nav-center {
    float: left;
}

.v-btn.doc-lib {
    margin-left: var(--v-tb-btn-s);
    float: left;
    display: none;
}

.v-btn.print {
    margin-left: var(--v-tb-btn-s);
    float: left;
}

.v-fig-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .5), rgba(0, 0, 0, .9));
    position: fixed;
    visibility: hidden;
    opacity: 0;
    user-select: none;
    z-index: 2200;
}

// 插图导航中的导航按钮
.v-fig-nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
}
// 插图导航中的上一插图按钮
.v-fig-nav-btns.prev {
    left: 0;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}
// 插图导航中的下一插图按钮
.v-fig-nav-btns.next {
    right: 0;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}
.v-fig-nav-btns.next>svg {
    transform: rotate(180deg);
}

.v-btn-close-figure-nav {
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    align-items: normal;
    color: #FFFFFF;
    cursor: pointer;
    background: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
}

.v-btn-close-figure-nav:hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    transform: translate(-2px, 2px) ;
}

.v-btn-close-figure-nav:active {
    background: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    //box-shadow: none;
    transform: none;
}

.v-content-assistor {
    visibility: hidden;
    opacity: 1;
    position: absolute;
    border-radius: var(--v-r-si);
    height: 26px;
    z-index: 50;
}

.v-btn.assistor {
    top: 0;
    width: 30px;
    height: 26px;
    border-radius: 0;
    background: @buttonBgColor;
    position: relative;
    display: none;
}
.v-btn.assistor.enabled {
    display: inline-flex;
}

.v-pic-in-pic {
    display: none;
    position: fixed;
    background: var(--h-f);
    border-radius: calc(var(--v-r-b) + var(--v-r-b) - var(--v-r-t));
    right: 20px;
    bottom: 10px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    z-index: 500;
}
.v-pic-in-pic>.v-content {
    overflow: auto;
    height: 100%;
    border-radius: calc(var(--v-r-b) - 2px);
}
.v-pic-in-pic>.v-content>:is(table, .v-fig) {
    border-radius: calc(var(--v-r-b) - 2px) !important;
}
.v-pic-in-pic>.v-content>table :is(th, td) {
    white-space: pre !important;
}

.v-pip-btn {
    position: absolute;
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    background: var(--d-bc);
    border-radius: 50%;
    top: 8px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 20;
}
.v-pip-btn.min.zoom-in {
    top: 6px;
}
.v-pip-btn.min.zoom-out {
    top: 3px;
}

.v-pip-btn.close {
    right: 8px;
}

.v-pip-btn.zoom.zoom-in {
    right: 32px;
}
.v-pip-btn.zoom.zoom-out {
    right: 38px;
}

.v-pip-btn.zoom-in {
    width: 20px;
    height: 20px;
}
.v-pip-btn.zoom-out {
    width: 26px;
    height: 26px;
}

.v-pip-btn.zoom-in>svg {
    transform: scale(1);
}
.v-pip-btn.zoom-out>svg {
    transform: scale(1.33);
}
.v-pip-btn:hover>svg>use {
    fill: @aHoverColor;
}
.v-pip-btn:active>svg>use {
    fill: @aActiveColor;
}

#doc-lib-toc {
    padding: 0 0 calc(5px + var(--v-r-b)) 0;
}

.v-doc-lib-item {
    font: var(--v-f-w-bd) 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-transform: uppercase;
    color: @docLibButtonForeColor;
    background: @docLibButtonBgColor;
    padding: 0 15px;
    height: calc(38px + var(--v-r-b));
    line-height: calc(38px + var(--v-r-b) - var(--v-r-b) / 2);
    margin: calc(0px - var(--v-r-b)) 15px;
    border-radius: calc(var(--v-r-s) * 2) calc(var(--v-r-s) * 2) 0 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .3);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
    cursor: pointer;
}
:is(#doc-lib-toc, .v-toc-filter-result) .v-doc-lib-item:last-of-type {
    padding-bottom: 0;
    border-bottom-left-radius: var(--v-r-s);
    border-bottom-right-radius: var(--v-r-s);
    border-bottom: calc(2px + var(--v-r-b) / 2) solid @aHoverColor;
}
:is(#doc-lib-toc, .v-toc-filter-result) .v-doc-lib-item:last-of-type:hover {
    border-bottom-color: @aColor;
}
.v-toc-filter-result .v-doc-lib-item:first-of-type {
    margin-top: 0;
}
.v-doc-lib-item:hover {
    background-color: @aHoverColor;
    color: @docLibButtonForeHoverColor;
    line-height: calc(30px + var(--v-r-b) - var(--v-r-b) / 2);
}
.v-doc-lib-item:hover>svg {
    margin-top: calc(6px + var(--v-r-s) - var(--v-r-s) / 2);
}
.v-doc-lib-item:hover>svg>use {
    fill: @docLibButtonForeHoverColor;
}
.v-doc-lib-item:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
}
.v-doc-lib-item>svg {
    float: left;
    margin-top: calc(10px + var(--v-r-s) - var(--v-r-b) / 4);
}
.v-doc-lib-item>svg>use {
    fill: @docLibButtonForeColor;
}

// 文档抽屉
.v-doc-lib {
    display: none;
    background: var(--d-bc);
    box-shadow: 0 0 0 2px var(--tbl-bd);
    margin: 0;
    border: none;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    overflow: auto;
    position: fixed;
    left: 10%;
    top: 0;
    right: 10%;
    bottom: 10%;
    z-index: 5000;
}
.v-doc-lib>iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: auto;
}

iframe[name="vlook-stat-gitee"] {
    display: block;
    margin: 0;
    border: none;
    overflow: hidden;
    width: 100%;
    height: 0;
}

.v-interactive {
    cursor: pointer;
}
.v-interactive.hover {
    border-color: @aHoverColor !important;
}
.v-interactive.hover:active {
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}
.v-interactive.hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.v-img-invert-dark {
    background-color: #FFFFFF !important;
    filter: var(--v-invert-dark);
    border-color: var(--img-bd-invert) !important;
}

// Light 模式的插图网格背景
.v-fig-solid-bg-light {
    // background: @figureSolidBgLight;
    background: var(--fig-solid-bg);
}
.v-fig-grid-line-light {
    background: var(--v-fig-grid-l) !important;
    // background: var(--v-fig-grid-l-lg) !important;
}
.v-fig-grid-block-light {
    background: var(--v-fig-grid-b) !important;
    // background: var(--v-fig-grid-b-lg) !important;
}

// Dark Mode 的插图网格背景
.v-fig-solid-bg-dark {
    background-color: var(--fig-solid-bg);
}
.v-fig-grid-line-dark {
    background: var(--v-fig-grid-l) !important;
    // background: var(--v-fig-grid-l-dk) !important;
}
.v-fig-grid-block-dark {
    background: var(--v-fig-grid-b) !important;
    // background: var(--v-fig-grid-b-dk) !important;
}
.v-fig-grid-line-dark-invert {
    background: var(--v-fig-grid-l-invert) !important;
}
.v-fig-grid-block-dark-invert {
    background: var(--v-fig-grid-b-invert) !important;
}

.v-fig-content {
    margin: 5px;
    padding: 40px 5px 5px 5px;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--d-fc);
}

.v-fig-nav-title {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.v-fig-page-num {
    border-radius: var(--v-r-s);
    color: #FFFFFF;
    background: var(--d-fc-a);
    padding-left: 4px;
    padding-right: 4px;
    font: normal .875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

.v-caption {
    display: inline-block;
    border-radius: var(--v-r-b);
    background: @captionBackground;
}
.v-caption.pr {
    width: 100%;
}

.v-cap-1,
.v-cap-2 {
    color: @captionTextColor;
    font: normal .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    //font-weight: normal;
    margin: 5px 10px !important;
    width: auto !important;
}

// 题注容器（导出后）
body.typora-export #write figcaption {
    position: relative;
    margin-top: @paragraphPadding !important;
}
.v-cap-cntr {
    border-radius: var(--v-r-b);
    margin-bottom: @scrollFix !important;
    // text-align: center;
    // width: fit-content !important;
}
// 题注容器：展开全部样式
@expanderHeight: 100px;
.v-cap-cntr.expander::before {
    content: attr(data-ex-label);//var(--v-ex-all, "");//attr("d-ex-text");
    white-space: pre;
    // text-transform: uppercase;
    color: @aColor;
    font-size: .875em;
    font-weight: var(--v-f-w-bd);
    text-align: center;
    width: 100%; // 实际以生成 HTML 后根据实际内容序号自动适配对应样式 .v-cap-cntr.expander.id-xxx
    height: @expanderHeight;
    top: calc(var(--v-ex-limit) - @expanderHeight);
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(0deg, @linerGradientFade);
    z-index: 10;
}
.v-cap-cntr.expander:hover::before {
    color: @aHoverColor;
}
// .v-cap-cntr.expander.id-1::before {
//     // width: ？？？; // 以实际计算为准
// }

// 用于折叠类、表格列格式复选框的小图标
.v-svg-small-ico {
    display: inline-block;
}
.v-svg-small-ico[data-chk="no"] {
    opacity: .25;
}

// 旋转 45 度
.v-rotate45 {
    transform: rotate(45deg);
    opacity: .5;
}
// 旋转 90 度
.v-rotate90 {
    transform: rotate(90deg);
    opacity: .5;
}

use.v-svg-ico-light {
    fill: @buttonForeColor;
}

use.v-svg-ico-dark {
    fill: var(--d-fc);
}

use.v-svg-ico-alpha {
    fill: var(--d-fc);
    opacity: .2;
}

use.v-svg-ico-theme {
    fill: @docLibButtonBgColor;
}

use.v-svg-ico-a {
    fill: var(--d-fc-a);
}

// 折叠按钮样式
// use.v-toc-folder-ico,
// use.v-rowgroup-folder-ico {
//     fill: var(--h-f);
// }

.v-svg-chp-nav {
    position: absolute;
    top: 18px;
}
.v-svg-chp-nav.left {
    left: 15px;
}
.v-svg-chp-nav.right {
    right: 15px;
    transform: rotate(180deg);
}

.v-svg-details {
    position: absolute;
    margin-left: calc(0px - var(--v-summary-w));
    margin-top: 2px;
}

// 遮罩样式
.v-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 1000;
}
// 遮罩扩展样式
.v-mask.left {
    background: linear-gradient(90deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.right {
    background: linear-gradient(270deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.bottom {
    background: linear-gradient(0deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.center {
    background: radial-gradient(ellipse, @themeBgColorDark 10%, fade(@themeBgColorDark, 50%));
}

// 遮罩关闭提示器样式
.v-mask-close {
    position: fixed;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    opacity: .7;
}
// 遮罩关闭提示器扩展样式
.v-mask-close.left {
    width: 16px;
    height: 60px;
}
.v-mask-close.right {
    width: 16px;
    height: 60px;
}
.v-mask-close.right>svg {
    transform: rotate(180deg);
}
.v-mask-close.bottom {
    width: 60px;
    height: 16px;
}
.v-mask-close.bottom>svg {
    transform: rotate(270deg);
}
.v-backdrop-blurs.enabled {
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
}

// 彩虹引用块
:is(#write, body.typora-export) .v-q {
    color: var(--d-fc);
    width: auto;
    border: none;
    border-radius: var(--v-r-b);
    padding: .75em 1em;
    // margin-top: 10px;
    // margin-bottom: 5px;
}
// 生成彩虹引用块相关样式
.genRainbowQuoteCSS(@quoteMark, @accColor, @btnBg, @btnFore) {
    #write .v-q.@{quoteMark} {
        box-shadow: 0 0 0 4px ~"var(--ac-@{quoteMark}-fade)" inset;
        background: none;
        border-color: @btnBg !important;
    }
    // 强调样式
    #write .v-q.@{quoteMark}.em {
        box-shadow: none;
        background: ~"var(--ac-@{quoteMark}-fade)" !important;
        border-color: @btnBg !important;
    }
    // 高亮
    #write .v-q.@{quoteMark} mark,
    #write .v-q .v-q.@{quoteMark} mark {
        box-shadow: 0 -.9em 0 0 ~"var(--ac-@{quoteMark}-fade)" inset;
    }
    #write .v-q.@{quoteMark}.em mark,
    #write .v-q .v-q.@{quoteMark}.em mark {
        box-shadow: 0 -.9em 0 0 var(--d-bc) inset;
    }
    // 复选框控件
    #write .v-q.@{quoteMark} .v-svg-input-checkbox>use {
        fill: @btnBg;
    }
    // 按钮链接
    #write .v-q.@{quoteMark} a kbd,
    #write .v-q .v-q.@{quoteMark} a kbd {
        background: @btnBg;
        color: @btnFore;
        box-shadow: 0 3px darken(@btnBg, 15%); // 按钮高 3px
    }
    #write .v-q.@{quoteMark} a kbd:hover,
    #write .v-q .v-q.@{quoteMark} a kbd:hover {
        color: @buttonForeHoverColor;
        background: @aHoverColor;
        box-shadow: 0 3px darken(@aHoverColor, 15%); // 按钮高 3px
    }
    // 明信片
    #write .v-q.@{quoteMark} .v-post-card {
        color: @btnFore !important;
        background: @btnBg !important;
    }
    #write .v-q.@{quoteMark} img[src*="#card"],
    #write .v-q.@{quoteMark} svg[data-inject-url*="#card"] {
        border-color: @btnBg !important;
    }
    #write .v-q.@{quoteMark}>p:has(img[src*="#card"][src*="#border"]) {
        background-color: @btnBg !important;
        border-radius: var(--v-r-b);
    }
    // 链接
    #write .v-q.@{quoteMark} a,
    #write .v-q .v-q.@{quoteMark} a {
        color: @btnBg !important;
    }
    #write .v-q.@{quoteMark} a:hover,
    #write .v-q .v-q.@{quoteMark} a:hover {
        color: var(--d-fc) !important;
        box-shadow: 0 -.3em 0 0 rgba(@accColor, .3) inset;
    }
    #write .v-q.@{quoteMark} a:active,
    #write .v-q .v-q.@{quoteMark} a:active {
        background: var(--pn-c);
        border-bottom: 0;
        // border-radius: var(--v-r-s);
    }
    // 标题
    #write .v-q .title-@{quoteMark},
    #write .v-q .v-q .title-@{quoteMark} {
        color: ~"var(--ac-@{quoteMark}-title-lg)";
    }
    // 强调标题
    #write .v-q .title-@{quoteMark}.em,
    #write .v-q .v-q .title-@{quoteMark}.em {
        color: ~"var(--ac-@{quoteMark}-title)";
    }
    // 列表符号
    #write .v-q.@{quoteMark} ::marker,
    #write .v-q.@{quoteMark} li::before {
        color: @accColor;
    }
    // 代码行号
    // #write .v-q.@{quoteMark} .CodeMirror-linenumber {
    //     color: @accColor;
    // }
}
.genRainbowQuoteCSS(rd, @accColorRed, @accColorRed, #FFFFFF);
.genRainbowQuoteCSS(og, @accColorOrange, @accColorOrange, #FFFFFF);
.genRainbowQuoteCSS(ye, @accColorYellow, @accColorYellow, #000000);
.genRainbowQuoteCSS(lm, @accColorLime, @accColorLime, #000000);
.genRainbowQuoteCSS(gn, @accColorGreen, @accColorGreen, #FFFFFF);
.genRainbowQuoteCSS(mn, @accColorMineral, @accColorMineral, #FFFFFF);
.genRainbowQuoteCSS(ol, @accColorOlives, @accColorOlives, #FFFFFF);
.genRainbowQuoteCSS(wn, @accColorWine, @accColorWine, #FFFFFF);
.genRainbowQuoteCSS(aq, @accColorAqua, @accColorAqua, #000000);
.genRainbowQuoteCSS(cy, @accColorCyan, @accColorCyan, #FFFFFF);
.genRainbowQuoteCSS(bu, @accColorBlue, @accColorBlue, #FFFFFF);
.genRainbowQuoteCSS(se, @accColorSea, @accColorSea, #FFFFFF);
.genRainbowQuoteCSS(la, @accColorLavender, @accColorLavender, #000000);
.genRainbowQuoteCSS(vn, @accColorVine, @accColorVine, #FFFFFF);
.genRainbowQuoteCSS(pu, @accColorPurple, @accColorPurple, #FFFFFF);
.genRainbowQuoteCSS(ro, @accColorRose, @accColorRose, #FFFFFF);
.genRainbowQuoteCSS(pk, @accColorPink, @accColorPink, #000000);
.genRainbowQuoteCSS(gd, @accColorGold, @accColorGold, #000000);
.genRainbowQuoteCSS(bn, @accColorBrown, @accColorBrown, #FFFFFF);
.genRainbowQuoteCSS(gy, @accColorGray, @accColorGray, #FFFFFF);
.genRainbowQuoteCSS(t1, @docLibButtonBgColor, @docLibButtonBgColor, @docLibButtonForeColor);
.genRainbowQuoteCSS(t2, @theme2, @aHoverColor, @buttonForeHoverColor);

// 编辑时标签样式
#write em>span>.md-before+code,
:is(#write, body.typora-export) .v-tag {
    font: var(--v-f-w-bd) .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    text-shadow: none;
    box-shadow: none !important;
    border-radius: var(--v-r-tag);
    border: 1px solid var(--d-bc);
    // border: none !important;
    white-space: pre;
    // line-height: 1;
    vertical-align: middle;
    cursor: var(--cur-copy);
}
// :is(#write, body.typora-export) .v-tag.em {
//     // box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
//     box-shadow: none !important;
// }
.v-tag.hover {
    filter: brightness(@hoverBrightness);
}

// 生成彩虹标签相关样式
.genRainbowTagCSS(@tagMark, @tagColor, @tagText) {
    .v-tag.@{tagMark} {
        color: ~"var(--ac-@{tagColor})" !important;
        // box-shadow: 0 0 0 1px ~"var(--ac-@{tagMark})" inset;
        background: ~"var(--ac-@{tagMark}-a)" !important;
    }
    .v-tag.@{tagMark}.em {
        color: @tagText !important;
        background: ~"var(--ac-@{tagMark})" !important;
    }
}
@deepTextColor: #FFFFFF;
@shallowTextColor: #000000;
@blackTextColor: var(--d-bc);
.genRainbowTagCSS(wn, wn, @deepTextColor);
.genRainbowTagCSS(rd, rd, @deepTextColor);
.genRainbowTagCSS(og, og, @deepTextColor);
.genRainbowTagCSS(ye, ye-title-lg, @shallowTextColor);
.genRainbowTagCSS(lm, lm-title-lg, @deepTextColor);
.genRainbowTagCSS(gn, gn, @deepTextColor);
.genRainbowTagCSS(mn, mn, @deepTextColor);
.genRainbowTagCSS(ol, ol, @deepTextColor);
.genRainbowTagCSS(aq, aq-title-lg, @deepTextColor);
.genRainbowTagCSS(cy, cy, @deepTextColor);
.genRainbowTagCSS(bu, bu, @deepTextColor);
.genRainbowTagCSS(se, se, @deepTextColor);
.genRainbowTagCSS(la, la-title-lg, @deepTextColor);
.genRainbowTagCSS(vn, vn, @deepTextColor);
.genRainbowTagCSS(pu, pu, @deepTextColor);
.genRainbowTagCSS(ro, ro, @deepTextColor);
.genRainbowTagCSS(pk, pk-title-lg, @shallowTextColor);
.genRainbowTagCSS(gd, gd-title-lg, @shallowTextColor);
.genRainbowTagCSS(bn, bn, @deepTextColor);
.genRainbowTagCSS(gy, gy, @deepTextColor);
.genRainbowTagCSS(bk, bk, @blackTextColor);
.genRainbowTagCSS(t1, t1, @deepTextColor);
.genRainbowTagCSS(t2, t2, @deepTextColor);

// 徽章样式名称公共样式
:is(#write, body.typora-export) .v-badge-name {
    display: inline-block;
    align-items: center;
    font: var(--v-f-w-bd) .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    margin-right: 0;
    border-radius: var(--v-r-tag);
    border: 1px solid var(--d-bc);
    // border: none !important;
    color: @deepTextColor;
    // color: fade(#FFFFFF, 90%);
    padding: 1px 1px 1px 5px;
    white-space: pre;
    // line-height: 1;
    // vertical-align: top;
    // box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
    box-shadow: none !important;
    cursor: var(--cur-copy);
}
.v-badge-name.hover {
    filter: brightness(@hoverBrightness);
}
// 三段式，两个徽章值时微调
:is(#write, body.typora-export) .v-badge-name.two {
    padding: 1px 5px !important;
}

// 表格内的情况
:is(#write, body.typora-export) @{quote_details} code {
    vertical-align: initial;
}
:is(#write, body.typora-export) table {
    vertical-align: text-top;
}

// 徽章样式内容公共样式
.v-badge-value {
    display: inline-block;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    border-radius: calc(var(--v-r-tag) - 2px);
    opacity: .9;
    color: var(--d-fc) !important;
    background: var(--d-bc) !important;
    padding: 0 5px;
    margin: 1px 1px 1px 5px;
    white-space: pre;
    box-shadow: none !important;
    border: none !important;
    cursor: var(--cur-copy);
}
.v-badge-value.hover {
    filter: brightness(@hoverBrightness);
}
// 三段式，两个徽章值时微调
.v-badge-value.two {
    margin: 1px 5px !important;
}

// 表格内的情况
:is(#write, body.typora-export) table .v-badge-value {
    display: inline-block;
    margin: 1px 1px 1px 5px;
}
.v-badge-value>span.var {
    font-style: italic;
}

.genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @tagText) {
    .v-badge-name.@{badgeMark} {
        color: @tagText !important;
        background: ~"var(@{badgeColor})" !important;
    }
    .v-badge-value>span.var.@{badgeMark} {
        color: ~"var(@{badgeVarColor})" !important;
    }
    :is(.v-badge-value, .v-badge-value>span.var).@{badgeMark} {
        color: ~"var(@{badgeVarColor})" !important;
    }
}
.genRainbowBadgeCSS(wn, --ac-wn, --ac-wn-lg, @deepTextColor);
.genRainbowBadgeCSS(rd, --ac-rd, --ac-rd-lg, @deepTextColor);
.genRainbowBadgeCSS(og, --ac-og, --ac-og-lg, @deepTextColor);
.genRainbowBadgeCSS(ye, --ac-ye, --ac-ye-lg, @shallowTextColor);
.genRainbowBadgeCSS(lm, --ac-lm, --ac-lm-lg, @deepTextColor);
.genRainbowBadgeCSS(gn, --ac-gn, --ac-gn-lg, @deepTextColor);
.genRainbowBadgeCSS(mn, --ac-mn, --ac-mn-lg, @deepTextColor);
.genRainbowBadgeCSS(ol, --ac-ol, --ac-ol-lg, @deepTextColor);
.genRainbowBadgeCSS(aq, --ac-aq, --ac-aq-lg, @deepTextColor);
.genRainbowBadgeCSS(cy, --ac-cy, --ac-cy-lg, @deepTextColor);
.genRainbowBadgeCSS(bu, --ac-bu, --ac-bu-lg, @deepTextColor);
.genRainbowBadgeCSS(se, --ac-se, --ac-se-lg, @deepTextColor);
.genRainbowBadgeCSS(la, --ac-la, --ac-la-lg, @deepTextColor);
.genRainbowBadgeCSS(vn, --ac-vn, --ac-vn-lg, @deepTextColor);
.genRainbowBadgeCSS(pu, --ac-pu, --ac-pu-lg, @deepTextColor);
.genRainbowBadgeCSS(ro, --ac-ro, --ac-ro-lg, @deepTextColor);
.genRainbowBadgeCSS(pk, --ac-pk, --ac-pk-lg, @shallowTextColor);
.genRainbowBadgeCSS(gd, --ac-gd, --ac-gd-lg, @shallowTextColor);
.genRainbowBadgeCSS(bn, --ac-bn, --ac-bn-lg, @deepTextColor);
.genRainbowBadgeCSS(gy, --ac-gy, --ac-t2-lg, @deepTextColor);
.genRainbowBadgeCSS(bk, --d-fc, --ac-t2-lg, @blackTextColor);
.genRainbowBadgeCSS(t1, --ac-t1, --ac-t1-lg, @deepTextColor);
.genRainbowBadgeCSS(t2, --ac-t2, --ac-t2-lg, @deepTextColor);

// GitHub Style Alert 通用样式
@alertTypePaddingTop: 0;
#write .md-alert {
    // border-radius: var(--v-r-b) !important;
    padding: @alertTypePaddingTop 1em .5em !important;
    // padding: .5em 1em !important;
    margin: 1em 0 !important;
    border-left-width: @quoteBorderWidth;
}
#write .md-alert @{quote_details} {
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s);
    margin-bottom: 0;
}
// 最前的
#write .md-alert :is(ul, ol):first-child {
    margin-block-start: 0 !important;
}
// 最后的
#write .md-alert :is(ul, ol):last-child {
    margin-block-end: 0 !important;
}
#write @{quote_details} .md-alert {
    margin-bottom: 0 !important;
}
#write .md-alert>p {
    margin-top: 0 !important;
}
#write .md-alert-text {
    font-family: var(--v-f-fm-subtitle) !important;
    font-size: 1em !important;
    font-weight: var(--v-f-w-title);
    display: inline-block;
    margin-bottom: @paragraphPadding;
}
#write .md-alert-text,
#write .md-alert-text-container::after {
    text-transform: uppercase;
}
#write .md-alert-text svg {
    margin-right: .5em;
}

// 常规风格详见 gsa.less

// 强调风格详见 gsa-em.less

// 生成基础部分
.genGitHubStyleAlertCssBase(@type, @accColor, @btnBg) {
    // 引用块小标题
    #write .md-alert-@{type} @{quoteTitle},
    // 编辑时的 summary
    content>#write .md-alert-@{type} @{summaryOnEditing},
    // 导出后的 summary
    #write .md-alert-@{type} summary,
    // 编辑时的题注前缀
    content>#write .md-alert-@{type} @{cap1_OnEditing}::before,
    content>#write .md-alert-@{type} @{cap2_OnEditing}::before,
    // 导出后的题注前缀
    #write .md-alert-@{type} .v-cap-1,
    #write .md-alert-@{type} .v-cap-2,
    // 链接
    #write .md-alert-@{type} a {
        color: @btnBg !important;
    }
    #write .md-alert-@{type} a:hover {
        color: @aHoverColor !important;
        box-shadow: 0 -.3em 0 0 rgba(@accColor, .3) inset;
    }
    #write .md-alert-@{type} a:active {
        background: var(--pn-c);
        border-bottom: 0;
    }
    // 按钮链接
    #write .md-alert-@{type} a kbd {
        background: @btnBg;
        color: #FFFFFF;
        box-shadow: 0 3px darken(@btnBg, 15%); // 按钮高 3px
    }
    #write .md-alert-@{type} a kbd:hover {
        color: @buttonForeHoverColor;
        background: @aHoverColor;
        box-shadow: 0 3px darken(@aHoverColor, 15%); // 按钮高 3px
    }
    // 复选框控件
    #write .md-alert-@{type} .v-svg-input-checkbox>use {
        fill: @btnBg;
    }
    // 高亮
    #write .md-alert-@{type} mark {
        box-shadow: 0 -.9em 0 0 ~"var(--ac-@{accColor}-fade)" inset;
    }
    // 列表符号
    #write .md-alert-@{type} ::marker,
    #write .md-alert-@{type} li::before {
        color: ~"var(--ac-@{accColor})";
    }
    // 代码行号
    #write .md-alert-@{type} .CodeMirror-linenumber {
        color: ~"var(--ac-@{accColor})";
    }
}

// 注音
rp,
rt {
    font: normal .5em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    opacity: .6;
    padding-left: .5em;
    padding-right: .5em;
}
rt:hover {
    color: @aHoverColor;
    opacity: 1;
    transform-origin: center bottom;
    transform: scale(1.5);
    cursor: pointer;
}

// 黑幕（刮刮卡）
#write .v-rb-coat {
    text-shadow: 0 1px var(--d-fc);
    box-shadow: none;
    color: var(--d-bc);
    font: var(--v-f-w-bd) .875em var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    cursor: pointer;
}
#write .v-rb-coat:hover {
    box-shadow: 0 0 0 1px @aLineColor !important;
    display:inline-block;
    transform: scale(1.2);
}
#write .v-rb-coat.opened {
    box-shadow: 0 0 0 1px var(--d-fc);
    background: var(--d-bc) !important;
    text-shadow: none;
}

// 标题内 code 样式
#write :is(h1,h2,h3,h4,h5,h6) code {
    font-size: .75em;
}

/**************************************
* 封面、封底
**************************************/

// 封面选择器
@coverAfterYAML: ~"#write>pre.md-meta-block:first-child+h6";
@coverWithoutYAML: ~"#write>h6:first-child";
// 封底选择器
@backcover: ~"#write>h1:last-child";

// 无标准封面时的封面样式
.v-doc-title {
    color: @headerColor;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    padding-top: 70px;
    opacity: .5;
}
.v-doc-title.mini {
    padding-top: 10px;
}

// 封面：#write 下 H6 作为第一个元素时
@{coverAfterYAML}, // 有 YAML 的情况
@{coverWithoutYAML}, // 无 YAML 的情况
// 封底：#write 下 H6 作为最后一个元素时
@{backcover} {
// #write>:is(.md-hr, hr)+h1:last-child {
    display: block;
    color: @coverTextColor !important;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    text-align: @coverTextAlign;
    filter: var(--v-brightness-dark);
    height: 950px;//25cm;
    padding: @coverTextPadding;
    margin: 0 0 3em;
    border: none;
    border-radius: var(--v-r-b);
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    letter-spacing: 0;
}
@{coverAfterYAML}>span, // 有 YAML 的情况
@{coverWithoutYAML}>span { // 无 YAML 的情况
    color: @coverTextColor !important;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
}
@{backcover}>span {
    color: @backCoverTextColor !important;
    -webkit-text-stroke: @backCoverTextStroke;
    text-stroke: @backCoverTextStroke;
    text-shadow: @backCoverTextShadow;
}

// 封底样式微调
@{backcover} {
    height: 550px;//14cm;
    margin-top: 3em;
    margin-bottom: 0;
    padding: @backCoverTextPadding;
    color: @backCoverTextColor !important;
    text-align: @backCoverTextAlign;
    background-color: @backCoverBackgroundColor;
    background-image: @backCoverBackgroundImage;
    background-size: @backCoverBackgroundSize;
    background-repeat: @backCoverBackgroundRepeat;
    background-position: @backCoverBackgroundPosition;
    letter-spacing: 0;
}

// 封面内上标格式
@{coverAfterYAML} sup,
@{coverWithoutYAML} sup {
    color: @coverTextColor !important;
}

// 封面内下标格式（大标题上的小标题）
@{coverAfterYAML} sub,
@{coverWithoutYAML} sub {
    color: @coverSubColor;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
    font: var(--v-f-w-bd) 75% var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 封面内下划线格式（大标题下的副标题）
@{coverAfterYAML} u,
@{coverWithoutYAML} u {
    color: @coverUnderlineColor;
    font: var(--v-f-w-bd) .75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-decoration: none;
    border: none;
}

// 封面内密级信息
@{coverAfterYAML} :is(code, .v-tag, .v-badge-name),
@{coverWithoutYAML} :is(code, .v-tag, .v-badge-name) {
    font-size: .5em !important;
    color: @buttonForeHoverColor;
    border-color: var(--rb-code-shadow-dk);
    caret-color: @buttonForeHoverColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    vertical-align: initial;
    background: @aHoverColor;
}
@{coverAfterYAML} .v-badge-value,
@{coverWithoutYAML} .v-badge-value {
    font-size: 1em !important;
}

// 封面内的作者信息
@{coverAfterYAML} :is(strong, strong::before),
@{coverWithoutYAML} :is(strong, strong::before) {
    color: @coverAuthorColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    font: normal .625em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 作者信息前缀
@{coverAfterYAML} strong::before,
@{coverWithoutYAML} strong::before {
    content: "by";
    opacity: .6;
    display: block;
    margin-bottom: -.5em;
}

// 封面内的版权信息
@{coverAfterYAML} em,
@{coverWithoutYAML} em {
    color: @coverOwnerColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    font: normal var(--v-f-w-bd) .4em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 封面、封底的前信息
@{coverAfterYAML}::before,
@{coverWithoutYAML}::before,
@{backcover}::before {
    content: "";
}
// 封面装饰文本样式 before
// -- 导出后
body.typora-export @{coverAfterYAML}::before,
@{coverWithoutYAML}::before,
body.typora-export @{coverAfterYAML}::after,
@{coverWithoutYAML}::after,
// -- 编辑时
@{coverAfterYAML}::before,
@{coverWithoutYAML}::before,
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after {
    content: @coverTextBeforeContent !important;
    position: @coverTextBeforePosition;
    left: @coverTextBeforeLeft;
    top: @coverTextBeforeTop;
    color: @coverTextBeforeColor;
    font-size: @coverTextBeforeFontSize;
    font-weight: @coverTextBeforeFontWeight;
    opacity: @coverTextBeforeOpacity;
}
// 封面装饰文本样式 after
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after {
    content: @coverTextAfterContent !important;
    text-align: @coverTextAfterTextAlign;
    left: @coverTextAfterLeft;
    top: @coverTextAfterTop;
    right: @coverTextAfterRight;
    color: @coverTextAfterColor;
    font-size: @coverTextAfterFontSize;
}

@import "media";
